中间件就是在action中不直接去更新数据,而是要通过一定异步处理之后再去更新store里面的数据。
*这里以redux-thunk为例:
- 第一步安装
cnpm install react-thunk --save
- 第二步: 使用createStore的第二个参数引用中间件
import {
createStore,
applyMiddleware
} from "redux"
// 使用中间件的步骤1
import logger from "redux-logger"
import thunk from "redux-thunk"
import {
deflate
} from "zlib";
const counterRdeux = (state = 0, action) => {
switch (action.type) {
case "add":
return state + 1;
case "minus":
return state - 1;
default:
return state
}
}
// 使用中间件的步骤2
const store = createStore(counterRdeux, applyMiddleware(logger, thunk))
export default store;
- 第三步:将对象改为函数形式调用中间件
const mapDispatchToProps = {
add: ()=> ( { type:"add"}),
minus: ()=> ({ type: "minus"}),
// return 一个函数就是异步操作
asyncAdd: () =>dispatch=> {
setTimeout(()=> {
dispatch({ type: "add"})
},1500)
}
}
- 以上就实现一个异步操作,在1.5s更新数据。