Redux 是一种流行的 JavaScript 应用程序状态管理库。 它通过支持单一数据源、不可变性和通过 action 对状态进行更新来简化应用程序的状态管理。 Redux 还支持中间件，以处理复杂的应用程序逻辑和副作用。
其中，applyMiddleware 函数是处理 Redux 中间件的关键之一。在本文中，我们将深入探讨 applyMiddleware 函数的实现原理，以帮助您更好地理解 Redux 中间件的工作方式。
前置知识
在继续深入探讨 applyMiddleware 函数之前，您需要了解以下几个重要的概念：
store：Redux 中唯一的数据源，存储整个应用程序的状态。
action：一个简单的对象，包含指示如何更新 state 的信息。
reducer：根据 action 更新状态的函数。
dispatch：触发 action 并更新 store 中的状态的方法。
middleware：拦截和处理 action 的函数， 可以执行异步操作以及改变 action 或者完全不发送。
applyMiddleWare 实现原理
applyMiddleware 函数的实现非常简单，它接受一些 middleware 作为参数，并返回一个增强后的 createStore 函数。其大致实现如下：
-------- ------------------------------- -
------ -------- -------------------------------- -
------ -------- ---------------------------- -
----- ----- - ---------------------
--- -------- - ---------------
----- ------------- - -
--------- ---------------
--------- -------- -- ----------------
--
----- ----- - -------------------------- -- ---------------------------
-------- - ----------------------------------
------ -
---------
--------
--
--
--
-applyMiddleware 函数的关键部分是 enhancedCreateStore 函数，它通过重写 dispatch 方法来添加中间件支持。在上述代码中，我们将对 store.dispatch 的引用存储到 dispatch 变量中，并使用 compose 函数对中间件进行组合。
compose 函数是一种功能强大的函数组合工具，可以将多个转换函数组合成一个单一的函数。 在这种情况下，它将传递给 applyMiddleware 函数的所有中间件作为参数，然后返回一个新函数，该函数依次应用每个中间件并返回新的 dispatch 函数。 最终，我们将增强的 dispatch 函数赋值回 store 对象中，并返回该对象。
如何使用 applyMiddleware
现在，让我们看一下如何在 Redux 应用程序中使用 applyMiddleware 函数。以下是一个简单的示例：
------ - ------------ ---------------- --------------- - ---- -------- ------ --------------- ---- -------------- ----- ----------- - ----------------- -- --- ---- -------- ---- --- ----- ---------- - ------------------ ----- ----- - ------------ ------------ ------------------------------ -- -- -------- ------- -- ---------- --- -----
在上述代码中，我们首先将需要的 middleware 导入并存储在 middleware 数组中，然后使用 combineReducers 函数将它们合并，生成 rootReducer。之后，我们使用 applyMiddleware 函数将 middleware 应用于 createStore 函数，使其在创建 store 时生效。
最后，我们向 createStore 函数传递 rootReducer 和中间件增强后的 store 处理剩余操作。
结论
applyMiddleware 函数非常简单明了，它仅通过重写 dispatch 方法来添加中间件支持。但是，其背后的思想是深思熟虑的，并且有助于处理应用程序逻辑和副作用的复杂问题。
当你开始开发自己Redux 应用程序时，请不要忘记 applyMiddleware 函数以及中间件的强大功能！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672d433dddd3a70eb6da09ce