react中使用中间件

中间件就是在action中不直接去更新数据，而是要通过一定异步处理之后再去更新store里面的数据。

*这里以redux-thunk为例：

• 第一步安装

代码语言：javascript复制

cnpm install react-thunk --save

• 第二步： 使用createStore的第二个参数引用中间件

代码语言：javascript复制

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; 

• 第三步：将对象改为函数形式调用中间件

代码语言：javascript复制

const mapDispatchToProps = {
  add: ()=> ( { type:"add"}),
  minus: ()=> ({ type: "minus"}),
  // return 一个函数就是异步操作
  asyncAdd: () =>dispatch=> {
    setTimeout(()=> {
      dispatch({ type:  "add"})
    },1500) 

  }
}

• 以上就实现一个异步操作，在1.5s更新数据。

redux action store 异步 中间件

0 人点赞