Redux 是一个极为流行的状态管理工具，它被广泛应用于 React 应用中。Redux 的核心概念是 Store，但是如果把所有的逻辑都写在 Store 中会使得代码变得复杂且难以维护。因此，Redux 提供了 Middleware 的概念来弥补这一缺陷。本文将深入分析 Redux-Middleware 中间件的原理和用法。
Redux-Middleware 是什么?
在 Redux 中， 中间件就是介于 Action 和 Reducer 之间的一个处理过程。Redux-Middleware 是一种被广泛使用的 Redux 中间件，它提供了一个统一的、可插拔的机制来扩展 Redux 基于应用。它可以用于检测非法 Action、异步行为(例如跨域请求)等没有被 Reducer 所处理的行为。
Redux-Middleware 的处理流程如下：
根据中间件定义的条件过滤 Action；
对 Action 进行某种处理，例如记录日志、转化 Action 或切片 Payload；
(可选)内部发起异步操作；
(可选)异步操作执行完毕后，继续将 Action 传递到下一个 Middleware 或 dispatch 到 Reducer。
Redux-Middleware 的使用方法
使用 Redux-Middleware 需要遵循以下步骤：
引入 Redux-Middleware 库和相应的中间件；
在 Store 的创建过程中使用 applyMiddleware 来注入 Middleware。
示例代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ---------- - ------- -------- ----- ----- - ------------ ------------ ------------------------------ --
这段代码导入了两种常见的 Middleware —— logger 和 thunk ，并将它们作为参数传递给 applyMiddleware 函数。applyMiddleware 函数接收所有要使用的 Middleware 数组，并创建一个新的 Store。
在创建 Middleware 之前，我们需要安装对应的库。logger 和 thunk 均受到广泛支持，可以通过 npm 安装：
npm install redux-logger redux-thunk --save
其中，logger 用于在控制台上记录 Action 和状态变化，从而方便调试；thunk 用于处理 Redux 异步流程。每个 Middleware 都必须从上一个 Middleware 接收一个 Action 并返回一个 Action。你也可以在 Middleware 内部发起自定义的异步操作，通过 Promise 来异步完成并返回结果，然后通过 dispatch 来派发 Action 到下一个 Middleware 或 Reducer。
Middleware 的原理分析
了解了 Redux-Middleware 的使用方法之后，下面我们将深入分析它的原理。
Redux-Middleware 依赖于 Function 的柯里化来实现对函数的预处理。具体而言，Reducer 是对 Store 中应用程序状态更改的具体控制，中间件传递的是原始的 dispatch。因此，Middleware 本质上是对柯里化函数的操作，例如 redux-thunk 库中的 applyMiddleWare 的代码如下：
-- -------------------- ---- -------
-------- ------------------------------- -
------ ----------- -- --------- -- -
----- ----- - ---------------------
--- -------- - -- -- -
----- --- ------
------------ ----- ------------ ---- ---------- -- --- ---------
--
--
----- ------------- - -
--------- ---------------
--------- --------- -- ------------------
--
----- ----- - -------------------------- -- ---------------------------
-------- - ----------------------------------
------ -
---------
---------
--
--
-applyMiddleware 函数通过接收一个或多个中间件函数的数组来生成一个新的函数，并返回一个被装饰后的 createStore 函数。
首先，applyMiddleware 接收 createStore 函数，并返回一个新的函数。当这个函数被调用时，调用链上所有中间件的实例将被创建。每个中间件实例应该将其 API 暴露给下一个中间件，同时将其自己作为 dispatch 的行为附加到这个 API 上。由于中间件实例彼此独立，所以每个中间件都可用来修改整个调用链。最后，applyMiddleware 在 dispatch 上创建一个组合所创建的调用链提供给整个应用程序。
下面我们来具体分析一下 applyMiddleware 的实现逻辑：
使用 createStore 函数创建 store；
允许 中间件 访问 getState 和 dispatch API；
遍历包含传入的每个 Middleware 的中间件数组，并调用每个中间件函数。每个中间件函数接收 Middleware API 作为参数，并返回一个新函数，此新函数接收参数 next。此新函数的 return（在我们的例子中，即 p1）被设置为下一个函数（这个函数是下一个 Middleware 的新函数或是 Real Dispatch）。参数“next”只是对下一个函数的引用，如果“next”调用了一个参数并返回结果，那么这个 Middleware 函数将拿到返回的结果。如果“next”调用时未附带参数，一个由下一个 Middleware 提供的普通的 dispatch 方法会被传递过来。
最后，将所有中间件连接起来形成一个链。在现有调用链的顶部添加一个新函数，这个函数将调用连接的函数，即 reducer 的实现。这个函数被提供给创建 store 的过程，并作为一个新的 dispatch 版本。dispatch 版本将作为整个程序的入口，并触发调用链中的每一个中间件函数。总的执行顺序是由 Middleware 生成链的顺序决定的。
结论
Redux-Middleware 是 Redux 中极其重要的特性之一，它可以非常方便地对各种 Action 序列进行处理。在本文中，我们讲解了 Redux-Middleware 的基本用法，并深入分析了它的实现原理。希望读者能够通过本文了解 Redux-Middleware，进一步加深对 Redux 的理解，提高自己的应用程序开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b787cd91dce0dc88acee4