javascript - 如何在react-saga中协调此行为？

我正在保存一个实体。

我想触发一个同步savePending（针对存储触发一个reducer），然后触发一个异步save操作（进行网络调用以进行保存）。

function * saveEntity({ paylpoad: { id, name } }) {
  yield put (savePending()); // triggers a synchronous reducer
  yield put (save()); // triggers an async saga
  yield put (saveComplete());
}

在继续使用savePending之前，redux-saga是否会等待save完成（即，reducer在商店中完成运行）？ （大概是）。

在迁移到下一个put（例如save）之前，redux-saga是否会等待与yield（例如saveComplete）发出的动作相关的所有reduce和sagas，即使它们是异步的？

最佳答案

是的，正如您所期望的，savePending()减速器将在产生put (savePending())效果后立即运行。

另一方面，不，yield put (save())调用将不等待保存完成。

我想你有这样的代码：

const save = () => { type: SAVE_ACTION };

function * watchSave() {
  yield takeEvery(SAVE_ACTION, doSave);
}

function * doSave() {
    // [async saving logic]
}

当您产生save动作时，它将触发对reducer的调用（如果您的save动作仅用于触发传奇，则它可能不起作用），但是您的saveEntity传奇无法知道等待由saveSaga操作触发的save。

有几种解决方法。一种方法是这样编写代码：

function * saveEntity({ paylpoad: { id, name } }) {
  yield put (savePending());
  yield call (doSave());
  yield put (saveComplete());
}

通过直接调用saveSaga()，saveEntity将等待saveSaga()完成后再继续。



另一方面，如果要保持saveEntity和saveSaga的耦合较少，则可以让saveSaga发出saveEntity可以监听的动作：

function * watchSave() { /* as before */ }

function * doSave() {
  // [async saving logic]
  yield put(saveCompleted()); // Indicate that the save is completed
}

function * saveEntity({ paylpoad: { id, name } }) {
  yield put (savePending());
  yield put (save());
  // Wait for the saveSaga to be done:
  yield take (saveComplete());
}