什么是 Redux 中间件？
Redux 中间件是 Redux 应用程序中的可插入功能，它允许在派发和处理 Redux Action 之间添加其他操作和逻辑。中间件可以处理异步操作、调用 API，添加日志、调试信息，并帮助系统进行错误处理。
中间件可以是任何函数，它被 Redux Store 调用并传入 dispatch 方法。Middleware 可以修改 dispatch 的结果，或者通过派发更多 Actions 来触发另一个调用。它们通常被用于处理异步逻辑，例如在发出一个 Action 之后，执行异步 API 请求，并在响应返回时，重新发送一个新 Action。
如何使用 Redux 中间件？
首先，我们需要使用 Redux 库提供的 applyMiddleware 方法将一个或多个中间件与 Redux 应用程序绑定。applyMiddleware 函数接受任意数量的参数，并将它们作为 middleware 数组传入。然后，它将这些 middleware 组合成一个供 Redux Store 使用的单个 middleware 函数。
例如：
------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ---------------- ---- --------------- ------ ----------- ---- ------------- ----- ---------- - ----------------- ------------------ ----- ----- - ------------------------ --------------------------------
在上面的示例中，我们将 Redux Thunk 和 Redux Logger 中间件与 Redux Store 绑定。Thunk 中间件可以帮助处理异步 Action 创建函数，Logger 中间件可以帮助记录 Action 和状态的变化。
你也可以编写自己的中间件。
----- ------------ - ----- -- ---- -- ------ -- - -- ---------- ----- ---- ------ ------------- - ----- ---------- - --------------- ----- ----- - ------------------------ --------------------------------
在上面的示例中，我们编写了一个简单示例的 Middleware，它接收 Store 对象并返回一个接收 next 和 action 参数的函数。
中间件的使用建议
在编写中间件时，最好在稍微了解一下其它已有的中间件，看看它们是如何构建的，它们如何使用Redux提供的API。
我们应该在组合程序库中使用中间件，而不是将其分离为独立的工具。这样，在重构项目时，我们可以使用其他更好的库扩展中间件。
示例代码
下面是一个简单示例，它演示了如何在 Redux 中使用中间件。这个例子使用了随机用户 API，展示了如何处理异步操作。
请确保安装了 redux-thunk。
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ----------- ---- -------------
----- ------------ - -
------ ---
---------- ------
--
----- -------- - -- -- -------- -- -
---------- ----- --------------------- ---
---------------------------------------------
--------- -- -----------
---------- -- -
---------- ----- ---------------------- -------- ------------ ---
--
------------ -- -
---------- ----- ---------------------- -------- ------------- ---
---
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ - --------- ---------- ---- --
---- ----------------------
------ - --------- ------ --------------- ---------- ----- --
---- ----------------------
------ - --------- ---------- ----- --
--------
------ ------
-
--
----- ---------- - ---------------------------------
----- ----- - -------------------- ------------
---------------------------在上面的示例中，我们首先定义了一个初始的 state，然后定义了三个 Actions。这个例子使用了 Redux Thunk 中间件，在用户调用 getUsers Action 时，会在异步操作完成之前返回一个函数。fetch API 用于获取随机用户数据，如果请求成功，则更新 state 中的 user 数据，反之则显示错误消息。
结论
在 Redux 中使用中间件可以帮助我们处理异步操作、添加日志、提供错误处理和调试信息。通过 applyMiddleware 函数，我们可以轻松地将一个或多个中间件与 Redux 应用程序绑定。
我们应该在编写中间件时考虑编写一个功能完善的程序库，而不是独立地编写一个工具。最后，在编写中间件时，应该考虑使用其他更好的第三方库。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66ffc55a516dc8a7a16827c0