Redux 中间件

1、什么是中间件

正如 Redux 文档所描述的，中间件是在派遣 action 和它抵达 reducer 的时间点之间的第三方扩展点。

中间件 和 Redux

你已经知道，单向数据流使 reducer 应用具有可预测性：为了改变 store 的状态，action 描述更改必须被派发到 reducer。然后 reducer 依次返回新的状态。

在派发 action 和 reducer 之间，我们可以引入一种叫做中间件的软件在 action 抵达 reducer 之前来拦截它。正如 Redux 文档_/英 所描述的，你可以将中间件看做：

…是在派发 action 和它抵达 reducer 的时间点之间的第三方扩展。

中间件收到该 action 后，它可以执行大量的操作，包括：

• 产生副作用（例如记录状态)
• 自己处理 action（例如发出异步 HTTP 请求）
• 重定向该 action（例如重定向到另一个中间件）
• 在派发期间运行一些代码
• 派发追加的 action

...它在将 action 传递给 reducer 之前执行所有这些操作！

中间件总结

中间件可以采用与 Redux 相同的单向状态管理模式，特别是中间件可以在派遣的 action 抵达 reducer 之前拦截它，然后重定向该 action 或产生副作用。

我们将在下个部分详细讲解一个副作用，使用 logger 中间件向控制台输出有价值的信息。

更多资料

• Redux 文档中的中间件 / _英
• 在 React/Redux 中创建自定义中间件

2.使用中间件

中间件位于 Redux应用的哪个位置？

还记得createStore() 方法用来创建 Redux store。除了传入reducer（经常是组合的“根 reducer”），createStore() 还可以接受可选 enhancer参数！以下是 createStore()的方法签名：

store.createStore(reducer, [preloadedState], [enhancer])

Redux 为我们提供了 applyMiddleware()函数，我可以将其用作enhancer 函数的参数。applyMiddleware()可以根据需要接受多个参数，我们可以在一个应用中使用多个中间件。我们看看具体代码，从logger 中间件开始！

示例：logger 中间件

Redux 是Web应用的“可预测状态容器”。当 action 被派遣时，我们希望看到新的状态被处理和保存（例如，状态不能自己更新，外部资源也不能直接写入状态）。如果能记录发生在应用中的每个 action，以及其变化前后的状态，岂不是很棒？

我们可以应用“logger”中间件来实现这一点！logger 会产生以下副作用：输出 reducer 处理 action 前后的 store 的状态

我们来了解下吧！

redux-logger npm 软件包

在上个视频中，我们使用了自定义 logger 将 store 的状态输出到控制台中。你也可以参阅 redux-logger，了解这个预构建的日志工具。安装指令：

npm install --save redux-logger

redux-logger 自带默认选项，但是你也可以根据需要添加其他自定义内容！

总结

我们要在 Redux 应用的一个中心位置（创建 store 时）应用中间件。createStore() 方法必须获取 reducer 参数，但是我们也可以传入可选 enhancer 参数。该参数是 Redux 的 applyMiddleware() 函数，它可以接受中间件本身的多个实例。

更多资料

• redux-logger