Redux 是一种强有力的状态管理器，可以为中大型应用程序提供可预测的状态管理机制。Redux 的核心代码非常小巧，也非常明晰，但是其实现过程可以比较复杂。
其中，Redux 的 applyMiddleware 函数可以为应用程序提供中间件机制，使得开发者可以方便地插入非常灵活的扩展逻辑。本文将深入探讨 applyMiddleware 的源码实现细节，帮助读者深刻理解 Redux 中间件机制的工作原理。
概述
在 Redux 中，store 接受单一的 reducer 函数，并使用 dispatch 函数将 action 解析为新的 state。applyMiddleware 函数则具有将插件插入 Redux 流程的能力，修改 store.dispatch 函数以允许插件干预状态管理流程。大多数插件会修改或增强 action 对象，或者修改或增强 state 对象。某些插件可能会完全替换 store.dispatch 和 store.getState 函数。applyMiddleware 使得开发者可以从外面很容易地调整 Redux 的行为，而无需修改 Redux 核心代码。
源码细节
applyMiddleware 函数非常简单：
------ ------- -------- ------------------------------- -
------ ----------- -- --------- -- -
----- ----- - --------------------
--- -------- - -- -- -
----- --- ------
------------ ----- ------------ ---- ---------- -- --- -------- - -
------ ---------- ----- --- -- ------- -- ---- ----------
-
-
----- ------------- - -
--------- ---------------
--------- --------- -- -----------------
-
----- ----- - -------------------------- -- --------------------------
-------- - ---------------------------------
------ -
---------
--------
-
-
-我们来认真解读这段代码:
- applyMiddleware 函数接受任意数量的中间件函数，并返回一个函数。
- 返回的函数接受 createStore 函数作为参数，并返回另一个函数。
- createStore 函数接受 reducer 函数和默认状态值作为参数，并返回一个拥有 getState、dispatch、subscribe、replaceReducer 属性的对象——即 Redux 中的 store。
- 返回的函数接受 reducer 函数和默认状态值作为参数，并通过 createStore 函数创建一个 store 对象。
- applyMiddleware 函数定义了一个初始的 dispatch 函数，它将在后面被重写，以便插件能够修改它。
- 定义 middlewareAPI 对象作为中间件函数的基础 API。其中，getState 函数是 Redux 内部的 getState 函数，而 dispatch 函数是初步定义的 dispatch 函数，其中参数被转发至导致其调用的函数中。
- 将中间件函数应用于 middlewareAPI 对象，并创建中间件链。此操作使用 map 函数转换每个中间件，使其接受 middlewareAPI 对象作为参数，并通过调用它们（在 action 发生之前）返回一个新的 dispatch(action) 函数。
- 将新的 dispatch 函数与 createStore 函数返回的原始 dispatch 函数与 composed 中间件链合并。此合成函数具有类似于洋葱模型的行为——它将最内层的中间件包装住，接着包装在中层的，再接着包装外层的中间件。最终，store.dispatch 包装了所有的中间件。
- 返回包含 store 和新的 dispatch 函数的对象。经过中间件链的处理，现在我们已经准备好向 Redux 分发 action。
通常，Redux 插件的代码看起来像这样：
----- -------- - ----- -- ---- -- ------ -- - -------------------------- ------- ----- ------ - ------------ ----------------- ------- ----------------- ------ ------ -
这基本上是一个返回中间件的函数，该中间件接受包含底层 store 的对象，以及一个带有将 action 传递给下一个中间件的 next 函数。它也需要传递 action 给下一个中间件，并返回下一个调用到底层 store 的 next 方法的结果，以确保 next 能够异步地处理每个操作。
实践指南
使用 applyMiddleware 作为扩展 Redux 应用程序的一种可能方法。
首先，Redux 提供了一个非常有用的 logger 插件。通过调用 npm install --save-dev redux-logger 安装它：
------ - ------------ --------------- - ---- ------- ------ ------ ---- -------------- ------ ----------- ---- ------------------ ----- ----- - ------------ ------------ ----------------------- - ------ ------- -----
请注意，你可以通过简单的调用 applyMiddleware 函数来插入多个中间件。只需将它们作为一个数组传递给 applyMiddleware 函数即可。例如，如果你希望在应用程序中同时使用 redux-thunk 和 redux-logger，可以按照以下方式加载它们：
------ - ------------ --------------- - ---- ------- ------ ------ ---- -------------- ------ ----- ---- ------------- ------ ----------- ---- ------------------ ----- ----- - ------------ ------------ ---------------------- ------- - ------ ------- -----
这个应用程序将可以异步地处理 action，同时将详细的操作日志记录到浏览器的开发者工具控制台中。
总结
Redux 的 applyMiddleware 函数为开发人员提供了灵活性和可扩展性，可以消除一些样板式代码，并让应用程序拥有更好的标准化和更强的可预测性。通过本文，你已经了解到 applyMiddleware 的实现细节，并学会了如何选择和使用 Redux 插件，以便实现增强的应用程序功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c5ef4c95c405902ee41985