中間件就是在action中不直接去更新數(shù)據(jù)浓恳，而是要通過(guò)一定異步處理之后再去更新store里面的數(shù)據(jù)碗暗。
*這里以redux-thunk為例：
- 第一步安裝
cnpm install react-thunk --save
- 第二步： 使用createStore的第二個(gè)參數(shù)引用中間件
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;
- 第三步：將對(duì)象改為函數(shù)形式調(diào)用中間件
const mapDispatchToProps = {
add: ()=> ( { type:"add"}),
minus: ()=> ({ type: "minus"}),
// return 一個(gè)函數(shù)就是異步操作
asyncAdd: () =>dispatch=> {
setTimeout(()=> {
dispatch({ type: "add"})
},1500)
}
}
- 以上就實(shí)現(xiàn)一個(gè)異步操作，在1.5s更新數(shù)據(jù)言疗。
