Redux 是一个流行的 JavaScript 应用程序状态管理库。它可以轻松地跟踪应用程序的状态并使得状态的修改易于管理。Redux 为应用程序提供了一个单一的状态存储器，使得所有状态都集中在一个地方，并提供了可预测性。
Redux 中间件允许开发人员在 Action 发起后，但是到达 Reducer 之前，拦截并处理 Action。它们可以用来记录、处理异步行为、调用接口或者其他简化应用程序开发的任务。本文将重点介绍 Redux 中间件的开发和实现。
开发过程
Redux 中间件是一个函数，该函数接受 Store 的 dispatch 和 getState 函数作为参数，并返回一个函数。这个返回的函数用于转发 Action 或者进行其他处理。
下面是用来处理异步行为的 Redux 中间件的代码：
-- -------------------- ---- -------
-------- -------------------------- ---------- -
------ -------------- -
------ ---------------- -
-- ------- ------ --- ----------- -
------ ---------------- ----------
-
------ -------------
--
--
-在这个代码中，我们 返回了一个函数，这个函数接受一个参数，这个参数也是一个函数，这个函数用于对 Action 进行处理。
在这个函数中，我们检查 action 是不是一个函数。如果是函数，就调用这个函数，并将 dispatch 和 getState 函数作为参数。否则，直接将这个 action 传递给下一个 middleware 或者 Reducer。
在这个示例中，我们将 Action 定义为一个函数，该函数接受 dispatch 和 getState 函数作为参数。这个函数可以执行任何异步操作，并在完成后调用 dispatch 将 Action 发送到 Store。
为了使用这个中间件，我们需要在创建 Store 的时候应用它。
import { createStore, applyMiddleware } from 'redux';
import asyncMiddleware from './asyncMiddleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(asyncMiddleware)
);Redux 中间件 Api
在 Redux 中间件中，我们使用 Store 的 dispatch 和 getState 函数来处理 Action。这些函数允许我们拦截 Action 并观察它的动态，以及将其传递给下一个 middleware 或者 Reducer。
dispatch(action)
dispatch 函数被用来分发一个 Action 到应用程序的状态树中。它负责调用所有的 middleware 和最终的 Reducer。
getState()
getState 函数返回当前应用程序的状态树。所有的状态都被存储在这个状态树中，此函数用于检查和观察状态，以及为 Action 更新数据。
next(action)
next 函数接受参数 action，并将它传递给下一个middleware 或者 Reducer。如果没有下一个 middleware 或者没有更多的 middleware，它将调用 Store 的 dispatch 函数来将 action 发送到 Reducer。
开发指导
在开发 Redux 中间件时，需要注意以下几点：
中间件的顺序
中间件的顺序是很重要的。如果中间件的顺序错了，可能会导致应用程序出错。有些中间件需要在其他中间件之前执行，所以应该谨慎选择中间件的顺序。
避免死循环
在使用中间件时，一定要注意避免出现死循环。如果中间件不正确地修改了 action 或者 state，可能会导致应用程序出现死循环。
显式地处理action
中间件函数必须明确处理所有的 action，并正确地传递它们到下一个 middleware 或者 Reducer。如果一个 action 没有被正确地处理，可能会导致错误。
示例
下面是一个简单的 Redux 中间件示例：
-- -------------------- ---- -------
-------- ------------------------ -
------ -------------- -
------ ---------------- -
-------------------------------- -------------- ------ -------- ----------------
-- -----------------
------ -------------
-
-
-
-------- ------------------------ -
------ -------------- -
------ ---------------- -
--------------
-------------------------------- -------------- ------ ------ ------ ------- ------------------- ------------------
-- -----------------
------ -------------
-
-
-
-------- ----------------- - --- ------- -
------ ------------- -
---- ------
------ ----------------- ------ -------- -----------------
--------
------ ------
-
-
----- ----- - ------------
------------
----------------
------------------
-----------------
-
--
--------------------- ------ -------- ----在这个示例中，我们定义了两个中间件 loggingMiddleware 和 testingMiddleware，并使用它们创建了一个 Store 。在分发任何 action 之前，我们需要将它们传递给 applyMiddleware 函数并在创建 Store 时应用它们。
loggingMiddleware 中间件打印 action 和其数据到控制台，以便我们可以研究应用程序的运行状况。
testingMiddleware 中间件用于测试提交的 action 的正确性以及它如何影响应用程序的状态树。
最后，在分发 action 并检查修改后的 state 后，我们的应用程序输出日志。
总结
Redux 中间件使得对 Action 进行处理变得更加容易，但是开发人员需要非常小心地开发中间件，确保它们能正确地修改 state 和 action，同时尽可能减少死循环的发生。为了避免问题，开发人员应该注重高质量的代码编写并保证对应用程序的动态有深入的观察和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644fa307980a9b385b904d97