深入认识Redux（四）
注1：本文主要根据 "自述|redux中文文档" 学习的个人总结记录。也是是为了更快更好的学习和接受redux的操作，更好的应用的项目中。原文档地址：http://www.redux.org.cn/
注2：本文较长，可能会需要花一点时间去阅读和理解.
异步Action
之前在开发的时候，关于在action creator中传入dispatch，然后通过异步请求后再dispatch action的方式触发reducer改变state，一直没有弄明白dispatch是如何传到action creator中的，自从研究文档后才大致弄清楚了。
今天我们就来弄清楚这些疑惑。如下就是一个在action creator中通过异步action的操作方式来触发reducer：
export function indexQuestion(data) {
return (dispatch) => {
Apis.indexQuestion(data) //发起一个接口请求
.then((res)=> {
dispatch({
type: Types.GET_INCEX_DATA,
store: res.data
});
}, (err)=> {
dispatch({
type: Types.ERROR_MESSAGE
});
})
}
}从上面的代码我们要注意到是发起请求的时候和请求收到响应的时候，在这两个时候都可以通过dispatch去改变state状态。如上实例代码主要是在请求响应后分别对成功和失败做了处理。
那么我们是如何将action和异步请求结合到一起的呢？标准的做法就是通过redux-thunk中间件（熟悉express的同学应该都了解什么叫做中间件吧）。通过使用指定的中间件，action creator除了返回普通的action对象，现在还可以返回函数，这个action函数就称为了“thunk”(什么叫thunk我还不太清楚....希望有人帮忙解释下)
那么中间件是起什么作用的呢？上面说了引入中间件后，action创建函数可以在函数体内返回其他函数了。那么当action中返回的其他函数的时候就会被Redux Thunk中间件执行，*会把dispatch方法通过参数的形式传给该函数。如下：
export function getMajor(){
return (dispatch) => { //返回一个函数，dispatch通过参数的形式传入
Apis.major().then((res)=>{
dispatch({ //请求成功的时候dispatch action改变state
type: Types.MAJOR_INFO,
store: res.data
})
}, (error) => {
dispatch({ //请求失败的时候dispatch另外一个action改变state
type: Types.ERROR_MESSAGE,
error
})
})
}
}我们是如何在 dispatch 机制中引入 Redux Thunk middleware 的呢？我们使用了 applyMiddleware(),如下：
//这是官方文档中例子,稍微删掉一些这样看起来更清楚。
import thunkMiddleware from 'redux-thunk' //引入thunk
import { createStore, applyMiddleware } from 'redux'
import { selectSubreddit, fetchPosts } from './actions'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(
thunkMiddleware, // 允许我们 dispatch() 函数
)
)如上，通过applyMiddleware引入了thunkMiddleware，这样就可以在action中再次dispatch action。
这可以让我们逐步开发复杂的异步控制流，同时保持代码整洁如初。
关于如何在action中传入dispatch可以继续dispatch action的原因就是这样。
中间件（Middleware）
引用文档中的一句话，它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。