Redux：在做其他事情之前等待状态变化

Question

在一个假设的应用中，用户可以创建一本书，默认情况下该书有 3 页。添加书籍和页面后，我想对书籍和页面做一些其他的事情。 Books 和 Pages 是我的 redux 存储中的两个单独的 reducer，也是我的数据库中的两个表。我目前的流程是这样的：

1. 用户创建新书。
2. 已调用 ADD_BOOK_REQUEST 操作
3. 调用了 ADD_PAGES_REQUEST 操作
4. 图书已添加到触发 ADD_BOOK_SUCCESS 的数据库中
5. 将页面添加到触发 ADD_PAGES_SUCCESS 的数据库

如上所述，在执行第 4 步和第 5 步之后，我想对这本书做一些其他的事情，但我不确定最好的方法。只是为了让它现在运行，目前我有一个 setTimeout 函数运行检查新书和具有该 bookId 的 3 页。如果书本和 3 页在商店中，请执行其他操作，如果没有，请再次运行超时。我很确定这不是最好的方法。 ：微笑：

Answer 1

Gosha Arinich 在他的帖子 Detecting state changes with Redux-Saga 中描述了一种可能的解决方案。

在那篇文章中，他建议编写一个 waitFor 函数，该函数将在提供的选择器最终返回 true 时返回：

function* waitFor(selector) {
  if (yield select(selector)) return; // (1)

  while (true) {
    yield take('*'); // (1a)
    if (yield select(selector)) return; // (1b)
  }
}

可以这样使用：

function* someSaga() {
  yield call(waitFor, state => getCurrentUser(state) != null);
  // the user is logged in by now
}

另一种可能的解决方案是更简单的自定义中间件，它会在分派操作后进行检查。

Answer 2

你有几个选择。

1) 在您的 React 组件中，您可以连接到在 ADD_PAGES_SUCCESS 时由 reducer 更新的状态。在componentWillReceiveProps 中，您可以检查该连接的状态，并在您的组件中分派您希望在步骤 (5) 之后完成的操作。

...不太好，因为componentWillReceiveProps 会很快变得毛茸茸，应该尽可能避免。

2) 使用 redux-thunk 或 redux-saga：

使用 Redux-saga，在您的 ACTION 处理程序 (sagas) 中，您可以 take ACTIONS 并执行诸如有条件地进行 API 调用和 yield（等待）服务器响应等操作，此时您可以触发 (@ 987654325@) 更多操作或进行更多 API 调用或做任何你想做的事情。这不会替换你的 reducer，也不会改变你的 redux 状态。

例子：

// worker Saga: will be fired on ADD_PAGES_SUCCESS actions

function* doStuffAfterAddPages(action) {
  while (true) {
    yield take(ADD_PAGES_SUCCESS);

    try {
      let moreData;
      const result = yield call(api.doSomethingElse);

      if (result.isExpected) {
        moreData = yield call(api.doOtherStuff);
      } else {
        moreData = yield call(api.doOtherStuff);
      }

      yield put(OTHER_STUFF_COMPLETE, { data: moreData });
    } catch (error) {
      yield put(OTHER_STUFF_FAILED, { error: error.message);
    }
  }
}