Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它是一个非常流行的状态管理库，广泛应用于 React 应用程序中。但是，在处理复杂的应用程序时，Redux 可能会变得有点繁琐。为了解决这个问题，Redux 提供了一种称为“中间件”的机制。
本文将深入探讨 Redux 中的中间件，包括它们是如何工作的、如何编写一个中间件以及如何使用它们来简化 Redux 应用程序。
什么是 Redux 中间件？
在 Redux 中，中间件是一种函数，它可以在 Redux 的 action 被 dispatch 之后，但是 reducer 处理之前，执行一些额外的逻辑。中间件可以拦截 action，对其进行处理，甚至可以发出新的 action。
中间件的作用是将 Redux 的逻辑从 reducer 中分离出来，使得代码更加清晰易懂。它们可以用于处理异步操作、日志记录、错误处理等等。
如何编写一个 Redux 中间件？
编写一个 Redux 中间件非常简单。一个中间件是一个接受 store 的 dispatch 方法作为参数的函数，并返回一个接受 next 方法作为参数的函数。next 方法是一个回调函数，用于继续处理下一个中间件或 reducer。
下面是一个简单的中间件示例，它会在每次 dispatch 之前打印出 action：
const loggerMiddleware = store => next => action => {
console.log('dispatching', action)
const result = next(action)
console.log('next state', store.getState())
return result
}在上面的代码中，我们定义了一个名为 loggerMiddleware 的中间件。它接受 store 作为参数，返回一个接受 next 方法作为参数的函数。在这个函数内部，我们定义了一个新函数，它接受 action 作为参数并打印出它。然后，我们调用 next(action) 来继续处理下一个中间件或 reducer。最后，我们打印出新的 state 并返回结果。
如何使用 Redux 中间件？
使用 Redux 中间件非常简单。只需要在创建 store 时将中间件传递给 applyMiddleware 方法即可。applyMiddleware 方法将返回一个新的函数，它接受 reducer 作为参数并返回一个新的增强版 reducer。
下面是一个使用 loggerMiddleware 的示例：
import { createStore, applyMiddleware } from 'redux'
import loggerMiddleware from './middlewares/loggerMiddleware'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(loggerMiddleware)
)在上面的代码中，我们将 loggerMiddleware 传递给 applyMiddleware 方法，并将返回的函数传递给 createStore 方法。这将创建一个新的 store，它将使用 loggerMiddleware 中间件来处理每次 dispatch。
Redux 中间件的示例应用
下面是一个使用 Redux 中间件的示例应用程序。它将获取 GitHub 用户的信息并将其显示在页面上。
首先，我们需要创建一个 action 和 reducer，用于获取用户信息：
-- -------------------- ---- -------
-- ---------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ---------------- - -- -- --
----- ------------------
--
------ ----- ---------------- - ---- -- --
----- -------------------
-------- ----
--
------ ----- ---------------- - ----- -- --
----- -------------------
-------- -----
--
-- ----------
------ -
-------------------
-------------------
------------------
- ---- ------------
----- ------------ - -
----- -----
-------- ------
------ ----
-
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
-------- -----
------ ----
-
---- -------------------
------ -
---------
----- ---------------
-------- -----
-
---- -------------------
------ -
---------
-------- ------
------ --------------
-
--------
------ -----
-
-接下来，我们需要编写一个中间件来处理异步操作。这个中间件将使用 axios 库来获取用户信息，并将结果传递给 reducer。
-- -------------------- ---- -------
-- -------------
------ ----- ---- -------
------ -
-------------------
-----------------
----------------
- ---- ------------
------ ----- ------------------- - ----- -- ---- -- ------ -- -
-- ------------ --- ------------------- -
-----------------------------------------------------------
-------------- -- -
-----------------------------------------------
--
------------ -- -
-----------------------------------------------
--
-
------ ------------
-在上面的代码中，我们定义了一个名为 fetchUserMiddleware 的中间件。它接受 store 作为参数，返回一个接受 next 方法作为参数的函数。在这个函数内部，我们检查 action 的类型是否为 FETCH_USER_REQUEST。如果是，我们使用 axios 库来获取用户信息。如果请求成功，我们将调用 store.dispatch 方法，将结果传递给 fetchUserSuccess action。如果请求失败，我们将调用 store.dispatch 方法，将错误消息传递给 fetchUserFailure action。最后，我们调用 next(action) 来继续处理下一个中间件或 reducer。
最后，我们需要将中间件应用于 store 并在 React 组件中使用它：
-- -------------------- ---- -------
-- --------
------ ----- ---- -------
------ -------- ---- -----------
------ - ------------ --------------- - ---- -------
------ - -------- - ---- -------------
------ ----------- ---- ------------------------
------ - ------------------- - ---- -----------------------------------
------ --- ---- ------------------
----- ----- - ------------
------------
------------------------------------
-
----------------
--------- --------------
---- --
------------
-------------------------------
-
-- ------
------ ------ - -------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ---------------- - ---- ------------
----- --- - -- -- -
----- ---------- ------------ - ------------
----- -------- - -------------
----- - ----- -------- ----- - - ----------------- -- ------
----- ------------ - - -- -
------------------
------------------------------------
-
------ -
-----
----- ------------------------
------ ----------- ---------------- ----------- -- ---------------------------- --
------- ----------------- -------------
-------
-------- -- ------------------
------ -- ---------------
----- -- -
-----
--------------------
-----------------
------
--
------
-
-
------ ------- ---在上面的代码中，我们创建了一个名为 App 的 React 组件。它使用 useState 钩子来保存输入框的值，并使用 useDispatch 和 useSelector 钩子来分发 action 和获取 store 中的状态。当用户提交表单时，我们将调用 dispatch(fetchUserRequest(username)) 来触发异步操作。在页面上，我们将显示用户的名称和简介。
结论
Redux 中间件是一个非常强大的工具，可以使我们的代码更加清晰易懂。它们可以用于处理异步操作、日志记录、错误处理等等。在本文中，我们深入探讨了 Redux 中间件的工作原理，并提供了一个示例应用程序来演示如何使用它们。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676274ab856ee0c1d4034b72