如何在Redux中处理两个连续的和依赖的Async调用？

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 });
      })
  }
}

您不会遇到任何竞争条件,因为当您分派{类型：RECEIVE_POSTS,payload：res}时,它是同步的,并且reducer在发送以下异步操作之前更新.