Redux 是一个可预测的状态管理库，它帮助我们更好地管理应用程序状态。中间件是一个常见的 Redux 插件，它允许我们在 Redux 生命周期中添加自定义行为。本文将介绍 Redux 的五个常见中间件，并提供使用示例。
1. Redux-Thunk 中间件
Redux-Thunk 允许我们在 Redux 动作中使用异步函数。这样，我们可以在动作中触发异步 API 调用、等待请求完成并处理响应。这个中间件需要从 Redux 中导入，然后使用 applyMiddleware 将其添加到 createStore 中。下面是一个使用 Redux-Thunk 中间件的示例代码：
-- -------------------- ---- -------
------ ---------- ---- --------------
------ - ------------ --------------- - ---- --------
----- ----- - ------------
------------
---------------------------
--
----- --------- - -- -- -
------ ----- ---------- --------- -- -
-- -------- ---- ------- ----
-
-
----------------------------2. Redux-Saga 中间件
Redux-Saga 是一个基于 Generator 的中间件，旨在更好地管理较复杂的异步活动。它采用了一种“Saga”（即 Generator）的处理方式，允许我们在 Redux 中定义可组合的异步操作。Saga 可以被视为一个异步函数，可以根据 Redux 动作进行自动调用。下面是一个使用 Redux-Saga 中间件的示例代码：
-- -------------------- ---- ------- ------ -------------------- ---- ------------- ------ - ------------ --------------- - ---- -------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- -- -----------------------------
3. Redux-Logger 中间件
Redux-Logger 是一个可用于调试 Redux 应用程序的中间件。它会在控制台中打印每个状态更新前后的所有状态，展示出 Redux 生命周期中的详细信息。下面是一个使用 Redux-Logger 中间件的示例代码：
import logger from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';
const store = createStore(
rootReducer,
applyMiddleware(logger)
);4. Redux-Persist 中间件
Redux-Persist 中间件可以让我们实现长久存储数据，保留上一次的状态。每当状态更新时，它会自动将状态数据保存到本地存储中。下面是一个使用 Redux-Persist 中间件的示例代码：
-- -------------------- ---- ------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- -------- -- ------------ --- --- ------ - ------------ --------------- - ---- -------- ----- ------------- - - ---- ------- -------- - ----- ---------------- - ----------------------------- ------------- ----- ----- - ------------ ----------------- -------------------- -- ----- --------- - --------------------
5. Redux-Form 中间件
Redux-Form 中间件使表单处理更加简单。它提供了一个与 React 组件一起使用的表单设计器，包括简单验证和错误处理工具。下面是一个使用 Redux-Form 中间件的示例代码：
-- -------------------- ---- -------
------ - ------ --------- - ---- -------------
----- ------ - ------- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------------ ------------
-----
------
----------------
-----------------
-----------
--
------
------
---
-----
------- -----------------------------
------
-------
-
-
------ ------- -----------
----- --------
-----------总结
Redux 的中间件提供了一种方便和实用的方法，用于向 Redux 生命周期中添加自定义行为。Redux-Thunk 允许我们使用异步函数，Redux-Saga 利用 Generator 管理异步活动，Redux-Logger 在调试时提供有用信息，Redux-Persist 可以让我们实现长期存储数据，Redux-Form 处理表单更加便捷。通过组合使用这些中间件，可以轻松地扩展 Redux 动作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0ecbb48841e9894d31367