redux日志记录——redux-logger

一、安装

npm i --save redux-logger
// 或
yarn add redux-logger

二、使用

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
import logger from "redux-logger";
import * as loginActions from "./action/login";

// 创建仓库
const store = applyMiddleware(logger)(createStore)(
  reducer
);
store.dispatch({
  type: loginActions.SETLOGIN,
  payload: {
    a: 1234,
  },
});

redux-logger会在dispatch改变仓库状态的时候打印出旧的仓库状态、当前触发的action以及新的仓库状态

三、redux-logger配置项

如果要配置redux-logger就不能直接导入logger 需要导入createLogger

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
import { createLogger } from "redux-logger";
import * as loginActions from "./action/login";

const logger = createLogger({
  // 配置项
});

// 创建仓库
const store = applyMiddleware(logger)(createStore)(
  reducer
);
store.dispatch({
  type: loginActions.SETLOGIN,
  payload: {
    a: 1234,
  },
});

redux-logger的配置项

四、注意项

redux-logger中间件应该放在所有中间件的最后一个，因为有的action可能不是一个平面对象，可能是一个函数（副作用函数），这时候需要在前面通过一些其它的中间件去处理，不然redux-logger会显示错误