用途
处理react的异步操作, 比如正常的一个后台系统, 弹窗关闭, 需要刷新列表等基本操作. 又或者用户进入系统, 先登录, 登陆成功之后, 拿到登陆信息再去做相关请求.
原理
由于store的方法dispatch, 他的参数是一个对象, 类似这种 {type: 'add', payload}, 现在用了这个redux-thunk之后, dispatch的参数可以是一个函数, 在这个函数里面可以dispatch多个action, 所以这个函数又叫creator函数, 来看看他的源码, 它的核心代码其实只有两行，就是判断每个经过它的action：如果是function类型，就调用这个function（并传入 dispatch 和 getState 及 extraArgument 为参数）
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
为什么需要它
其实不需要中间件也可以完成异步操作, 即只直接在业务层代码的相关地方直接发书写, 比如上面栗子中, 在请求成功之后再发另一个action, 可是用了中间件之后 我们可以把一些回调放在公共函数里面, 便于调用
用法
先，我们还是来看一下这个库的用法。redux-thunk是作为redux的 middleware 存在的，用法和普通 middleware 的用法是一样的，注册 middleware 的代码如下：
import thunkMiddleware from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunkMiddleware))
注册后可以这样使用：
// 用于发起登录请求，并处理请求结果
// 接受参数用户名，并返回一个函数(参数为dispatch)
const login = (userName) => (dispatch) => {
dispatch({ type: 'loginStart' })
request.post('/api/login', { data: userName }, () => {
dispatch({ type: 'loginSuccess', payload: userName })
})
}
store.dispatch(login('Lucy'))
可以看到，redux-thunk主要的功能就是可以让我们dispatch一个函数，而不只是普通的 Object。后面我们会看到，这一点改变可以给我们巨大的灵活性。
参考
