如何在 Redux 中处理两个连续且依赖的异步调用？

Question

我通过从 componentDidMount 上的组件调用操作 fetchPosts 异步获取帖子列表。我想，一旦该请求被相关的 reducer 接收并处理（更新状态），调用另一个操作 fetchPostsMetaData，其中包含一个刚刚收到的帖子 ID 的数组。

我正在使用 redux-thunk 中间件，并使用 jQuery.ajax

发出我的 ajax 请求

解决此问题的最佳方法是什么？我尝试使用谷歌搜索但找不到相关示例/答案。

Answer 1

使用redux-thunk:

class PostIndex extends React.Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(getPosts());
  }
  ...
}

function fetchPosts() {
  return dispatch => {
    fetchPostsAjax()
      .then(res => {
        dispatch({ type: 'RECEIVE_POSTS', payload: res });
        dispatch(fetchPostMeta(res));
      })
  }
}

function fetchPostMeta(posts) {
  return dispatch => {
    fetchPostMetaAjax(posts)
      .then(res => dispatch({ type: 'RECEIVE_POST_META', payload: res }));
    }
  }
}

function fetchPostAjax() {
   // return a promise, whether from jQuery.ajax or fetch
}

function fetchPostMetaAjax() {
  // return a promise
}

这是 redux-thunk 的一个非常标准的用例。上面的示例迎合了您提出问题的方式，但您可以在看起来像此处提供的 redux-thunk 示例的单个动作创建器中完成此操作：http://redux.js.org/docs/advanced/AsyncActions.html

不同之处在于，在我的示例中，我在一个 thunk 内部调度一个 thunk，而不是直接在第一个 thunk 内部执行第二个任务。所以它相当于这个：

function fetchPosts() {
  return dispatch => {
    fetchPostsAsync()
      .then(res => { // res is posts
        dispatch({ type: 'RECEIVE_POSTS', payload: res });
        return fetchPostMetaAsync(res);
      })
      .then(res => { // res  is metadata
        dispatch({ type: 'RECEIVE_POST_META', payload: res });
      })
  }
}

你不会运行进入任何竞争条件，因为当你分派一个像 { type: RECEIVE_POSTS, payload: res } 这样的动作时，它是同步的并且在你分派以下异步动作之前减速器更新。

如何在 Redux 中处理两个连续且依赖的异步调用？

How to handle two consecutive and dependent Async calls in Redux?

redux