如何在 redux-saga 中等待 saga 的执行完成？

Question

我有以下场景：

export function* addCircle(circleApi, { payload }) {
    try {
        const response = yield apply(
            circleApi,
            circleApi.addCircle,
            [payload]
        );

        if (response.error_type) {
           yield put(addCircleFailedAction(response.error));
        } else {
            yield put(addCircleSucceededAction(response));
        }
    } catch (err) {
        console.error(err);
    }
}

export function* addTender(tenderApi, { payload }) {
    try {
       // NOTE: I want this to finish before continuing with rest of saga below.
       yield call(addCircleAction(payload.circlePayload));

       // Rest of saga removed for brevity.
    } catch (err) {
        console.error(err);
    }
}

所以，基本上addCircle 正在进行 API 调用，并且根据其成功，我调用适当的 redux 操作。现在，在另一个 saga 中，我调用了负责 addCircle saga 的操作，我希望它在继续执行 saga 的其余部分之前完成执行。我尝试使用 call，但它基本上不会等待 addCircle saga 完成执行。有什么方法可以等待吗？我从我的组件内部调用addCircle，我不需要等待它，但在这个特定的例子中，我必须在 saga 内部调用它，所以我真的需要等待它完成执行，改变状态的应用程序，这样我就可以在 addTender saga 的其余部分中使用更新的状态。有什么想法吗？

Answer 1

如果您正在调度多个会触发 addRender 的操作，则无法保证 take(...) 会真正等待由 yield 调用产生的操作。

export function* addCircle(circleApi, { payload }) {
  try {
      const response = yield apply(
          circleApi,
          circleApi.addCircle,
          [payload]
      );

      if (response.error_type) {
         yield put(addCircleFailedAction(response.error));
         return response;
      } else {
          yield put(addCircleSucceededAction(response));
          return response;
      }
  } catch (err) {
      console.error(err);
      return {err};
  }
}

export function* addTender(tenderApi, { payload }) {
  try {
     //because addCircle saga is returning something you can re use it
     // in other sagas.
     const result = yield call(addCircle,circleAPI?,payload.circlePayload);
     //check for result.error_type here
     // Rest of saga removed for brevity.
  } catch (err) {
      console.error(err);
  }
}

您的代码和接受的答案将导致错误，因为call 没有将操作对象作为第一个参数（它确实采用 {context,fn} 类型的对象）。

分派一个动作，然后监听另一个可能是或可能不是您刚刚分派的动作的副作用的动作是糟糕的设计。您异步调度这些操作，并且无法保证它们都需要相同的时间来完成或提供您等待的副作用，它们的启动顺序与它们的启动顺序相同​​。

Answer 2

根据您的代码 sn-p，您的 addCircle 传奇将在完成执行之前调度 addCircleFailedAction 或 addCircleSucceededAction 动作创建者。因此，我们将不得不在您的 addTender 传奇中等待这些操作。

基本上，这是您应该做的。我只是根据动作创建者的名字猜测你的动作类型。

yield call(addCircleAction(payload.circlePayload));
yield take([ADD_CIRCLE_FAILED_ACTION, ADD_CIRCLE_SUCCEEDED_ACTION]);

// Rest of the saga

虽然有一种极端情况。您没有在 addCircle 传奇的 catch 块中调度任何操作。也许您可以在 catch 块内调度一个名为 addCircleExceptionAction 的操作，并与其他操作一起等待它，如下所示：

yield take([ADD_CIRCLE_FAILED_ACTION, ADD_CIRCLE_SUCCEEDED_ACTION, ADD_CIRCLE_EXCEPTION_ACTION]);