在redux的actionCreators里面只能做一些同步的操作,reducer只能是个纯函数,也没办法进行操作,但是后续如果需要做一些异步请求,就没办法实现了。
此时就需要安装一些redux的中间件,来帮助我们实现异步操作,例如redux-thunk, redux-saga, redux-promise
它是在actionCreators创建的action到达reducer中间的过程。
可以利用Redux middleware 来进行日志的记录,创建崩溃报告,调用异步接口或者路由等。
redux-thunk就是增强了派发功能,store.dispatch(action)的增强。
1.安装redux的中间件
yarn add redux-thunk
2.在store/index.js里面引入
import {
applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
reducer,
applyMiddleware(thunk)
);
引入完成之后,将thunk中间件放在applyMiddleware方法之中,就可以在actionCreators中进行一些异步的操作了。
例如:
compute(){
return dispatch=>{
setTimeout(()=>{
dispatch({
type:COMPUTE})
},1000)
}
}
在redux-thunk源码里:就会判断actionCreators是一个对象还是一个函数
如果是一个对象:内部会自动的调用dispatch(action)给reducer进行处理(同步)
actionCreators ==> 自动的调用dispatch(action) ==> reducer ==> 返回新状态的store ==> react组件view
如果是一个函数:内部就会提供一个参数dispatch,让我们自己选择对应的时机进行dispatch(action)给reducer处理。
actionCreators ==> middleware处理后 ==> 手动调用dispatch(action) ==> reducer ==> 返回新状态的store ==> react组件view
export function addCount() {
return {
type: ADD_COUNT}
}
export function addCountAsync() {
return dispatch => {
setTimeout( () => {
dispatch(addCount())
},2000)
}
}
redux-thunk源码:
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;
它是一种es6的写法:将它转换为es5的写法梗容易理解:
function createThunkMiddleware(extraArgument) {
return function({
dispatch, getState }) {
return function(next){
return function(action){
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
}
}
redux-thunk的操作,就是可以接受一个返回函数的action creator。如果这个action creator返回的是一个函数,就执行它,如果不是,就按照原来的next(action)执行。
下面就是redux-thunk中间件的action流程: