javascript - 在另一个传奇中使用 Action /传奇

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

这3个请求request1，request2和request3对应于3个单独的Sagas。例如，对于request1，有一个传奇:

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中的此观察器已连接到相应的 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){
返回{type:ACTION1，data};
}

为了使我的代码保持干燥，我希望利用父传奇中现有的 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是对其 Action {type: "actions/ACTION1", data: data1}的引用，而不是Promise。

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

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

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

更新资料

我可以使用来自父传奇中其他Sagas的 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操作的好处。

最佳答案

您需要做的就是将all组合器与call效果结合使用(composing sagas和running tasks in parallel的文档):

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

这将并行执行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});
  }
}

注意:您不需要派生takeEvery，因为它已经“ fork ”了:

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