react学习之redux（四）

之前的博客介绍了如何将容器组件连接到redux，下面介绍如何发送异步请求：

action

当调用异步API的时候，有两个非常关键的时刻，发起请求的时刻，和接收到响应的时刻

一般情况下，每个API请求都需要dispatch至少三种action，

1. 通知reducer请求开始的action，切换isFetching标记，告诉UI显示进度条
2. 通知reducer请求成功的action，reducer会把请求到的数据合并到state中去，并且重置isFetching，UI会隐藏进度条，显示接收到的数据
3. 通知 reducer 请求失败的 action。对于这种 action，reducer 可能会重置 isFetching。或者，有些 reducer 会保存这些失败信息，并在 UI 里显示出来
   

同步 Action Creator

先定义几个同步的 action type 和 action creator

设计state结构

以官方demo帖子为例，每个帖子的列表都需要使用 isFetching 来显示进度条，didInvalidate 来标记数据是否过期，lastUpdated 来存放数据最后更新时间，还有 items 存放列表信息本身。在实际应用中，你还需要存放 fetchedPageCount 和 nextPageUrl 这样分页相关的 state。

如果你有嵌套内容，或者用户可以编辑接收到的内容，你需要把它们分开存放在 state 中，就像数据库中一样。在分页信息中，只使用它们的 ID 来引用。这可以让你始终保持数据更新

处理 Action

我们需要编写reducer，用到的是拆分reducer，然后用combineReducer方法组合

异步 Action Creator

如何把之前定义的同步 action creator 和 网络请求结合起来呢？标准的做法是使用 Redux Thunk middleware。你只需要知道一个要点：通过使用指定的 middleware，action creator 除了返回 action 对象外还可以返回函数。这时，这个 action creator 就成为了 thunk。使用thunk的好处是，可以在函数内部多次dispatch。我们使用了 applyMiddleware()引入thunkMiddleware

import thunkMiddleware from 'redux-thunk'import createLogger from 'redux-logger'import { createStore, applyMiddleware } from 'redux'import { selectSubreddit, fetchPosts } from './actions'import rootReducer from './reducers'const loggerMiddleware = createLogger()const store = createStore(  rootReducer,  applyMiddleware(    thunkMiddleware, // 允许我们 dispatch() 函数    loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志  ))store.dispatch(selectSubreddit('reactjs'))store.dispatch(fetchPosts('reactjs')).then(() =>  console.log(store.getState()))

thunk 的一个优点是它的结果可以再次被 dispatch