javascript - 在另一个 Saga 中使用 Action/Saga

Question

我有一个 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;
  }
}

导出函数请求1(数据){ 返回{类型:ACTION1，数据}；

为了让我的代码保持干燥，我希望利用父传奇中的现有 Action 和传奇。为此，我尝试了:

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

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

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

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

如果不是，完成此任务的正确方法是什么？

更新

我可以在父传奇中使用来自其他传奇的 worker ，就像这样:

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 操作的好处。

Answer 1

您所需要的只是将 all 组合子与 call 效果结合起来(composing sagas 和 running tasks in parallel 的文档):

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

这将并行执行传奇并返回每个传奇的结果。它以 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);
  // ...
}