react中使用中间件

用户4344670

发布于 2020-06-28 15:43:40

6150

发布于 2020-06-28 15:43:40

文章被收录于专栏：vue的实战 vue的实战vue的实战

中间件就是在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) 

  }
}