Redux 是一个非常流行的 JavaScript 应用程序状态管理工具，它提供了一种可预测性的状态管理方式。Redux 的核心理念是将状态（state）和操作（action）分离开来，使用纯函数来描述状态的变化，从而使得状态变化的过程具有可追溯性和可测试性。
Redux 的中间件机制是其核心特性之一，它可以帮助我们在 Redux 的 action 和 reducer 之间添加额外的逻辑，例如日志记录、异步请求等。本文将介绍 Redux 中间件的基本原理，以及如何编写自己的中间件。
Redux 中间件的原理
在 Redux 中，中间件（middleware）是一个函数，它接收 Redux store 的 dispatch 和 getState 方法作为参数，并返回一个函数，这个函数接收下一个中间件或者 Redux store 的 dispatch 方法作为参数。这个函数也可以称为“下一个中间件”（next middleware）或者“下一个 dispatch”（next dispatch）。
下面是一个简单的中间件示例：
-- -------------------- ---- ------- ----- ------------ - ----- -- ---- -- ------ -- - -- - ------ - -------- ------- ------------------- ----------- -------- -- ---------- ----- ----- - -------- -- ----- ------ - ------------- -- - ------ - -------- ------- ------------------ ----------- ------------------ -- -- -------- ------ ------ ------- --
这个中间件在 action 被 dispatch 之前和之后分别输出一些日志，然后调用下一个中间件或者 Redux store 的 dispatch 方法，并返回 dispatch 方法的返回值。
在 Redux 应用中，我们可以使用 applyMiddleware 函数将多个中间件组合起来，并将其作为 createStore 函数的第二个参数传入。applyMiddleware 函数的实现如下：
-- -------------------- ---- -------
----- --------------- - ---------------- -- ----------- -- --------- -- -
-- -- ----- -----
----- ----- - ---------------------
--- -------- - ---------------
-- ------- -------- -
------------------------------ -- -
-------- - ----------------------------
---
-- ------ -------- -------------
------ -
---------
--------
--
--applyMiddleware 函数接收多个中间件作为参数，并返回一个函数，这个函数接收 createStore 函数作为参数，并返回一个新的 createStore 函数，这个新的 createStore 函数将中间件应用到 dispatch 上，并返回一个增强了的 dispatch 方法。
编写自己的中间件
下面我们将通过一个简单的示例来演示如何编写自己的中间件。假设我们有一个需求：在 Redux 应用中，如果用户登录成功，则自动跳转到首页。
首先，我们需要创建一个 action 类型，用于表示用户登录成功：
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
然后，我们需要创建一个 action 创建函数，用于创建登录成功的 action：
export const loginSuccess = () => ({
type: LOGIN_SUCCESS
});接着，我们需要编写一个中间件，用于捕获 LOGIN_SUCCESS action，并进行跳转操作。这个中间件的实现如下：
-- -------------------- ---- -------
------ - ------------- - ---- ------------
----- -------------- - ------- -- ----- -- ---- -- ------ -- -
-- ------------ --- -------------- -
------------------
-
------ -------------
--
------ ------- ---------------这个中间件接收一个 history 对象作为参数，用于进行路由跳转。当 LOGIN_SUCCESS action 被 dispatch 时，这个中间件会调用 history.push('/') 方法进行跳转，然后调用下一个中间件或者 Redux store 的 dispatch 方法。
最后，我们需要将这个中间件应用到 Redux 应用中。我们可以在应用程序的入口文件中使用 applyMiddleware 函数将中间件应用到 dispatch 上：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - --------------- - ---- -------- ------ - -------------------- - ---- ---------- ------ - ---------------- - ---- ------------------------- ------ ----------- ---- ------------- ------ -------------- ---- ------------------- ----- ------- - ----------------------- ----- ---------- - --------------------------- ------------------------- ----- ----- - ------------------------ --------------------------------
在这个示例中，我们使用了 connected-react-router 库来进行路由管理，并将 routerMiddleware 作为一个中间件应用到了 Redux 应用中。同时，我们也将自己编写的 redirectToHome 中间件应用到了 Redux 应用中。
总结
Redux 中间件是 Redux 的核心特性之一，它可以帮助我们在 Redux 的 action 和 reducer 之间添加额外的逻辑，例如日志记录、异步请求等。本文介绍了 Redux 中间件的基本原理，并演示了如何编写自己的中间件。希望本文能够对读者理解 Redux 中间件机制有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cadd8fadd4f0e0ff4b46aa