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

Question

我正在保存一个实体。

我想触发一个同步的 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());
}

在继续save 之前，redux-saga 是否会等待savePending 完成(即reducer 完成对store 的运行)？ (大概是的)。

redux-saga 是否会等待与 put(例如 save)发出的 Action 关联的所有 reducer 和 sagas，即使它们是异步，在进入下一个 yield 之前(例如 saveComplete)？

Answer 1

是的，如您所料，savePending() reducer 将在 put (savePending()) 效果产生后立即运行。

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

我想你有这样的代码:

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

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

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

当您放弃 save 操作时，它会触发对您的 reducer 的调用(如果您的保存操作仅用于触发 saga，它可能什么都不做)，但是没有办法您的 saveEntity saga 需要等待 saveSaga，这是由 save 操作触发的。

有几种方法可以解决这个问题。一种是像这样编写代码:

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

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

---

另一方面，如果你想保持 saveEntity 和 saveSaga 的耦合度较低，你可以让 saveSaga 发出一个 Action 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());
}