在前端开发中，Redux 是一个非常流行的状态管理工具，它的目标是让状态变化可预测。在复杂应用中使用 Redux 可以更好地管理数据，提高应用的可扩展性、可测试性和可维护性。本文讨论了 Redux 中一个非常强大的特性-中间件的使用，它允许我们在 action 发送至 reducers 之前和之后进行一些操作。
中间件是什么？
Redux 中间件本质上是一个函数，作用是将 action 传递给下一个中间件（如果存在）或 reducer。但是，在传递之前中间件可以执行额外的操作，例如打印日志，修改 action，发送异步请求等等。中间件可以被插入到 Redux 的 action 管道中的任何位置，以便在 reducer 处理 action 前或后执行一些附加功能。
为什么需要中间件？
中间件可以帮助我们解决 Redux 的以下问题：
- 异步操作：因为 redux 的纯函数编程模型要求所有操作必须是同步且无副作用的，因此异步操作必须通过中间件来完成。
- 日志记录：中间件可以用来记录 Redux 中的 action 和其对应的 State，以方便排查和分析问题。
- 错误处理：中间件可以用来处理异常或错误信息，在 Redux 中优雅地处理错误情况。
- 修改 action：中间件可以用来修改 action，比如添加一些元数据等。
如何使用中间件构建 Redux 应用？
首先，我们需要安装一个 Redux 中间件库 redux-thunk。redux-thunk 是一个非常流行的中间件库，它允许我们编写异步 action creator，并将其添加到 Redux 管道中。
npm install redux-thunk
接下来，让我们看看如何使用中间件构建 Redux 应用。
创建中间件
我们可以使用 applyMiddleware 函数来将一个或多个中间件连接到 Redux 管道中。这个函数接受一个或多个中间件作为参数，返回一个可应用于 createStore 的新函数，用于创建 Redux store。
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware),
);编写中间件
创建一个中间件非常简单，它必须是一个函数并接受 store 的 getState 和 dispatch 函数作为参数。它可以修改 action 对象，执行一些副作用（例如发送异步请求），并在结束后调用 next(action) 将 action 传递给下一个中间件或 reducer。
下面是一个简单的 middleware 示例：
const myLogger = store => next => action => {
console.log('dispatching', action)
const result = next(action)
console.log('next state', store.getState())
return result
}使用中间件
现在我们已经编写了一个中间件函数，让我们将它应用到我们的 Redux 应用程序中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ----------- ---- ------------------- ----- -------- - ----- -- ---- -- ------ -- - -------------------------- ------- ----- ------ - ------------ ----------------- ------- ----------------- ------ ------ - ----- ----- - ------------ ------------ -------------------------------- ---------- --
完整的例子
下面是一个使用 Redux、React 和 Redux-thunk 中间件的完整例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - --------- ------- - ---- --------------
------ --------------- ---- --------------
-- ------
----- ---------------- - -- -- -
------ -
----- --------------------
-
-
----- ---------------- - ------ -- -
------ -
----- ---------------------
-------- ----
-
-
----- ---------------- - ------- -- -
------ -
----- ---------------------
-------- -----
-
-
----- ---------- - -- -- -
------ -------- -- -
----------------------------
------ -------------------
-------------- -- ----------------
---------- -- ---------------------------------
------------ -- ----------------------------------
-
-
-- -------
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ ------
---- ---------------------
------ ---------------
---- ---------------------
------ ------
--------
------ ------
-
-
-- ----------
----- -------- - ----- -- ---- -- ------ -- -
-------------------------- -------
----- ------ - ------------
----------------- ------- -----------------
------ ------
-
-- ------ -----
----- ----- - ------------
-------------
-------------------------------- ---------
--
-- ---------
----- ----- - -- ------ ---------- -- -- -
------ -
-----
------- ------------------------- --------------
----
--------------- -- --- ---------------------------------
-----
------
-
-
----- --------------- - ------- -- -
------ -
------ -----
-
-
----- ------------------ - ---------- -- -
------ -
----------- -- -- -
----------------------
-
-
-
----- -------------- - ------------------------ --------------------------
-- ------
----------------
--------- --------------
--------------- --
------------
-------------------------------
--结论
Redux 中间件可以帮助我们解决许多问题，包括异步操作、日志记录、错误处理等。同时，中间件也使得我们可以调整 Redux action 管道中 action 发送的顺序，从而更好地控制应用程序的状态变化。希望这篇文章帮助你理解 Redux 中间件的用途，以及如何使用它们构建强大的 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f76373c5c563ced5995b6d