在另一个 Saga 中使用 Action/Saga

Posted 2023-02-22

【中文标题】在另一个 Saga 中使用 Action/Saga

【英文标题】：Using Action/Saga in another Saga

【发布时间】：2017-11-13 20:59:13

【问题描述】：

我有一个 Saga，我需要执行 3 个异步请求，然后在后续请求中使用来自 3 个请求的响应。这里有一些伪代码来解释：

function* useOtherActionsAndSagas(action) 
  try 
    const [response1, response2, response3] = yield [
      request1,
      request2, 
      request3
    ];

    const orderData = 
      ...response1,
      ...response2,
      ...response3,
    ;

    const response4 = yield request4;

    yield put( type: 'SUCCESS', data: response4 );
   catch (e) 
    // handle error
  

request1、request2 和 request3 3 个请求对应于 3 个单独的 Sagas。例如，对于request1，有一个 Saga，类似于：

export function* request1(action) 
  try 
    const result = yield api.get(`/api/endpoint`);
    yield put(...action, type: ACTION1_SUCCESS, data: result);
   catch (e) 
    yield put(...action, type: ACTION1_FAIL, errors: e);
  


function* watchAction1() 
  yield* takeLatest(ACTION1, request1);


export default function* () 
  yield [fork(watchAction1)];

其中api.get 是Axios.get() 的包装器。

Saga 中的这个 watcher 连接到相应的 action/reducer。

export const ACTION1 = "actions/ACTION1";
export const ACTION1_SUCCESS = "actions/ACTION1_SUCCESS";
export const ACTION1_FAIL = "actions/ACTION1_FAIL";

const initialState = 
  // Initial state
;

export default function reducer(state = initialState, action = ) 
  switch (action.type) 
    case ACTION1:
      // return state
    case ACTION1_SUCCESS:
      // return state
    case ACTION1_FAIL:
      // return state
    ;
    default:
      // return state;
  

导出函数 request1(data) 返回类型：ACTION1，数据；

为了保持我的代码干燥，我希望利用父 saga 中现有的 action 和 saga。为此，我尝试了：

const [response1, response2, response3] = yield [
  put(type: ACTION1, data: data1),
  put(type: ACTION2, data: data2),
  put(type: ACTION3, data: data3)
];

这会正确启动每个动作及其对应的 sagas。但是，请求的响应在分配的变量中不可用。也就是说，response1、response2 和 response3 是对它们的操作 type: "actions/ACTION1", data: data1 的引用，而不是 Promise。

我知道可以在这个父 Saga 中复制 Axios 请求，但我会失去对单个请求执行成功/失败操作的好处。

是否可以使用这样的设置？如果是这样，如何检索来自异步请求的响应以用于后续请求？

如果不是，实现此目的的正确方法是什么？

更新

我可以使用父 saga 中其他 Sagas 的工人，如下所示：

import request1 from request1Saga;

const [response1, response2, response3] = yield [
  call(request1, data1),
  call(request2, data2),
  call(request3, data3),
];

其中request1、request2 和request3 是其他 Sagas 的工作函数。这提供了来自正在使用的 Sagas 的 ACTION1_SUCCESS 和 ACTION1_FAIL 操作的好处。

【问题讨论】：

你使用的是哪个版本的 redux-saga？我认为从 v0.15.0 开始，他们现在使用 yield all([]) 看看 - github.com/redux-saga/redux-saga/blob/…

目前在 0.12.1，我可以更新，但我认为这不会解决响应问题。

是的，我认为这不会有什么不同。还有一件事不是 yield [] 寻找承诺对象？在这里，您只有状态返回。

是的，我认为这就是问题的症结所在。我想重用外部操作/传奇来利用他们的成功/失败操作，并且不复制另一个传奇中已经存在的请求。

我想如果我将 Saga 工作人员从 sub-sagas 传递给每个 fork()，这将起作用。我现在正在对请求数组做类似的事情。

【参考方案1】：

您只需将all 组合器与call 效果结合起来（composing sagas 和running tasks in parallel 的文档）：

const [response1, response2, response3] = yield all([
  call(request1),
  call(request2), 
  call(request3)
]);

这将并行执行 sagas 并返回每个 sagas 的结果。它的工作方式为Promise.all。

上面的sagas（request1到request3）需要在saga结束时返回一些数据：

export function* request1(action) 
  try 
    const result = yield call(url => api.get(url), `/api/endpoint`);
    yield put(...action, type: ACTION1_SUCCESS, data: result);
    // This will be assigned to result1
    return result
   catch (e) 
    yield put(...action, type: ACTION1_FAIL, errors: e);
  

注意：你不需要fork takeEvery，因为它已经“fork”了：

// Example of root saga:
export default function* () 
  yield takeLatest(ACTION1, request1);
  yield takeLatest(ACTION2, request2);
  // ...

【讨论】：

在这个解决方案（OP 似乎很满意）中，您正在运行 request# sagas 等，这样会派发 ACTION#_SUCCESS/FAILURE，但 ACTION# 没有运行，因此减速器不使用 ACTION#。如果您希望 ACTION# 减速器也运行，您需要做什么？

@qonf 这个 saga 是通过监听 ACTION1 触发的，并且动作只有在它们首先通过 redux reducer 之后才会传递给 redux-saga。因此，在这里您始终可以保证，在您处理 saga 中的进一步副作用时，需要使用 ACTION1 完成的任何减少操作都已经完成