React@16.x（61）Redux@4.x（10）- 中间件1 - redux-logger

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));

1. predicate，配置只输入指定的 action；
2. collapsed，默认打印的 log 是展开的，true 表示折叠。

2.2，注意点

redux-logger 中间件，在 applyMiddleware 的参数位置必须为最后一个。

原因1：

其他中间件也有可能会 dispatch 一些 action，而 redux-logger 放在最后可以保证记录所有中间件的动作，得到一个完整的日志记录。

原因2：

在 applyMiddleware 的原理 中提到，最后一个中间件参数拿到的是原始的的 store.dispatch，这样才能保证触发的 action 是一个 plain object，从而打印正确的日志。

有的中间件会修改 action，比如下篇文章的 redux-thunk 会修改 action 为一个函数。

---

以上。