前言
Redux 是一个流行的 JavaScript 状态管理库。它以可预测的方式管理应用程序的状态，使开发人员能够轻松跟踪和调试它们的应用程序状态。和其他状态管理库一样，Redux 通过 dispatching actions 修改 store 中的 state。但是 Redux 中间件就是一个更高级的概念，关键在于他增强了 dispatch 函数的能力。
本文将介绍 Redux 中间件在 React 应用中的应用，深入理解中间件对 Redux 应用的帮助，以及如何编写一个常用的中间件来提高 Redux 应用的质量和性能。同时，我们也会使用一些代码示例来说明中间件在 React 应用中的使用，方便大家理解。
Redux 中间件的介绍
与其他库不同的是，Redux 允许开发人员编写和使用中间件来扩展 Redux 应用的功能。中间件是 redux 的扩展机制，是请求和响应之间添加自定义逻辑的一种方式。它通过劫持 action，对 action 进行扩展和处理，以此来对 Redux 的行为进行控制和增强。
中间件的结构和使用示例
中间件基本的结构通常是一个函数，该函数返回一个更高阶的函数，该函数接受 store 的 dispatch 函数作为其唯一参数。通过这种方式，中间件执行时始终与 dispatch 关联，可以在 action 发生时执行自定义逻辑。
下面是一个包含日志处理的简单中间件示例，主要功能是在控制台输出当前 dispatch 的 action 和 state。
const loggerMiddleware = store => next => action => {
console.group(action.type);
console.info('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
console.groupEnd();
return result;
}使用 applyMiddleware 方法将中间件应用到 Redux Store 中。
import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers'
import loggerMiddleware from './middlewares/loggerMiddleware'
const store = createStore(
reducer,
applyMiddleware(loggerMiddleware)
)上述代码演示了如何将一个中间件添加到 Redux 应用中，以便将日志的输出添加到控制台。通过为 Store 注册 loggerMiddleware 函数，就可以在控制台中看到关于每次 dispatch 的详细信息。
下面是一个将中间件添加到 Redux 应用中的完整代码示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
----- ---------------- - ----- -- ---- -- ------ -- -
---------------------------
--------------------------- --------
----- ------ - -------------
----------------- ------- ------------------
-------------------
------ ------
-
-------- -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
--------
------ -----
-
-
----- ------------ - - ------ - -
----- ----- - ------------
--------
-------------
---------------------------------
-
---------------- ----- ----------- --
---------------- ----- ----------- --理解 Redux 中间件的作用
中间件在 Redux 应用中具有多种用途，例如，它可以用于构建异步流，管理副作用，操作 action，增强 Dispatch，实现日志等。
下面是中间件最常见的用例之一 - 异步操作的流程控制。在下面的示例中，我们将使用 redux-thunk 中间件来获取异步数据并将其添加到 store 中。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
----- ------------ - -------- -- -
------ -
----- ----------------
------
-
-
----- ------------ - -------- ----- -- -
------ -
----- ----------------
-------
------ ---------------------------- -- ------------
----------- ----------
-
-
----- ---------- - -------- -- -
------ -------- -- -
------------------------------
------ ------------------------------------------------
-------------- -- ----------------
---------- -- -
------------------
----------------------------- ------
--
-
-
----- ------------ - -
----------- ------
------ --
-
----- ------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ ----------------- ------ -
----------- ----
--
---- ----------------
------ ----------------- ------ -
----------- ------
------ ------------
--
--------
------ -----
-
-
----- ----- - ------------
--------------
--------------------------------
-
----------------------------------------在上述示例中，我们使用 Redux-Thunk 来应用中间件并处理异步数据流。在 fetchPosts 函数中，我们使用了 dispatch 处理整个异步流程，包括请求、响应及其后续操作。在请求数据的同时，我们使用 actions 来更新 store 中的数据，同时在异步响应结束后更新数据。这个示例中，中间件可以通过增强 dispatch 函数来更好的管理异步流程，提高了 Redux 应用的代码质量和业务扩展性。
编写 Redux 中间件
在阅读完了关于中间件的基本知识之后，我们来看一下如何编写一个常用的 Redux 中间件，以此进一步理解中间件的概念。
中间件应用示例
在一个简单的 React 应用中，用户随时都有可能要对记录进行新增、修改和删除。每次操作记录时，我们需要更新 store 中的数据并更新 UI。但为了保证数据的一致性，通常会在 UI 触发后再回调服务端 API 方法，将数据写入数据库。那么这就需要经过一番异步处理流程。
我们可以使用中间件来管理这个异步操作流程，以方便数据的操作和同步。对于上述这个操作，我们可以使用 Redux 应用中的中间件来处理异步操作，并在操作完成后更新 store 中的数据。
编写一个简单的和可复用的中间件
这里我们将编写一个名为 axiosMiddleware 的层中间件，它可以在 Redux 应用中通过 promise 对象扩展每个异步请求来处理 AJAX 调用。
此中间件使用 axios JavaScript 库来处理 AJAX 请求。
-- -------------------- ---- -------
------ ----- ---- -------
---
- ----- ------ ----- -- ---- -----
- ------- -------------------- ----
--
----- --------------- - -- -------- -- -- -
---
- --------- -------- ------------------
- ------ ---
- ------ ------
- ------ ----
- -------- ------------
--
----- -------------- - ----- ------- ----- -- -
---------- ----- ----------------- --
------ -------
-------
----
-----
-------- ---
---------------- -- -
---------- ----- ------------------ -------- ------------- --
------ --------
--
------------ -- -
-- --------------- -- -------------------- -
--------------- ----------------- -------- ---------------------
- ---- -
--------------- ----------------- -------- ---------------
-
----- -----
--
-
------ ---- -- ------ -- -
----- - ----- ---- ------- ---- - - ------
-- ----- -- -------- -
------ ------------
-
-- ----- --- ---------- -
------ ------------
-
------------------- ------- -----
------ ------------
-
-
------ ------- ---------------下面，我们可以在 Redux 应用中注册该中间件：
import { createStore, applyMiddleware } from 'redux'
import axiosMiddleware from './axiosMiddleware'
const store = createStore(
reducer,
initialState,
applyMiddleware(axiosMiddleware)
)现在，当我们的应用程序向 server 发送一个 API 请求时，将自动调用 axiosMiddleware 中间件来处理异步调用。
// 发送一个异步请求
store.dispatch({
type: 'REQUEST',
url: 'http://mockapi.com/api/test',
method: 'GET',
})如上所示，我们可以轻松地在 Redux 应用中使用自定义和复用的中间件。
总结
Redux 中间件是一个非常强大的概念，可用于管理 Redux 应用程序的异步流程，以及处理其他的 aspect aspects（例如：操作 state，action 和 dispatch）。使用 Redux 中间件，我们可以提高开发效率、增强代码的可读性和可维护性。
在使用中间件时，我们一定要注意执行流程的方式，避免中间件在应用程序中产生不合时宜的 "副作用"，同时也应该根据具体业务需求来编写复用代码的可复用性更好的中间件。希望通过本文，让读者对 Redux 中间件有深入的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457d257968c7c53b0a68aa1