redux中间件的认识

原创

水痕01 2021-06-15 16:07:49 ©著作权

©著作权归作者所有：来自51CTO博客作者水痕01的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、`redux Thunk`中间件的认识

主要作用就是让action创建的函数不会立即执行返回一个action对象,在正常业务开发中,我们可能要在action里面做些业务处理就可以用的到

1、安装
```
npm install redux-thunk --save
```
2、项目中导包
```
import thunk from 'redux-thunk';
```

3、与redux结合来使用

import {createStore, applyMiddleware} from 'redux';
// 创建一个store
let store = createStore(count,applyMiddleware(thunk));

4、中间件的函数格式(函数里面进行业务操作,然后要dispatch一个action)

// 定义一个action  
const action1 = () => ({
    type: INCREMENT,
});
// 一个高阶函数(返回的函数里面的参数是固定的)
const action4 = () => {
    return (dispatch, getState) => {
        //进行业务操作
        dispatch(action1());
    }
}

二、常见的中间件

1、redux-logger打印日志中间件

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);