1,介绍
一个中间件,在 dispatch
分发 action
时触发,并记录一些信息:
2,使用
官方文档。
import { createStore, bindActionCreators, applyMiddleware } from "redux";
import logger from "redux-logger";
import reducer from "./reducer";
import { createAddUserAction, createDeleteUserAction } from "./action/userAction";
const store = createStore(reducer, applyMiddleware(logger));
const actions = {
addUser: createAddUserAction,
updateUser: createUpdateUserAction,
deleteUser: createDeleteUserAction,
};
const bindAction = bindActionCreators(actions, store.dispatch);
bindAction.addUser({ id: 3, name: "name3", age: 20 });
bindAction.deleteUser(1);
输出内容如上图示。
2.1,配置项
可以使用 createLogger
方法,来使用配置项。举例:
import { createLogger } from "redux-logger";
const logger = createLogger({
predicate: (getState, action) => action.type !== DELETE_USER,
collapsed: true,
});
const store = createStore(reducer, applyMiddleware(logger));
predicate
,配置只输入指定的action
;collapsed
,默认打印的 log 是展开的,true
表示折叠。
2.2,注意点
redux-logger 中间件,在 applyMiddleware
的参数位置必须为最后一个。
原因1:
其他中间件也有可能会 dispatch
一些 action
,而 redux-logger 放在最后可以保证记录所有中间件的动作,得到一个完整的日志记录。
原因2:
在 applyMiddleware 的原理 中提到,最后一个中间件参数拿到的是原始的的 store.dispatch
,这样才能保证触发的 action
是一个 plain object,从而打印正确的日志。
有的中间件会修改
action
,比如下篇文章的 redux-thunk 会修改action
为一个函数。
以上。