《React-Native系列》27、 Redux的异步数据流

我们再前面讲的 redux 中的数据流都是同步的，流程如下：

view -> actionCreator -> action -> reducer -> newState -> container component 

但是，在大多数的前端业务场景中，需要和后端产生异步交互，譬如:网络api的请求。

Redux中怎么来实现异步的数据流呢？

异步Action

通常我们创建的Action如下：

export const REQUEST_POSTS = 'REQUEST_POSTS'
export function requestPosts(subreddit) {
  return {
    type: REQUEST_POSTS,
    subreddit
  }
}

我们来创建一个异步的Action：

export function fetchPosts(subreddit) {

  return function (dispatch) {

    dispatch(requestPosts(subreddit))

    return fetch(`http://a.com/xxx`)
      .then(response => response.json())
      .then(json =>
        // 可以多次 dispatch！
        dispatch(receivePost