React Redux 是一种前端框架，它可以帮助我们管理应用程序的状态。Redux 通过一个被称为“Store”的单一状态树来管理应用程序的状态。然而，在应用程序中处理复杂的异步代码可能会变得非常困难。这就是 Redux 中间件的作用。
在本篇文章中，我们将深入了解 Redux 中间件的作用、如何编写它们以及如何将它们与 React 应用程序一起使用。
中间件是什么？
中间件本质上是一个函数，它接收 store 的 dispatch 方法作为参数，并返回另一个函数，这个函数则接收 action。然后，中间件可以选择：
- 对 action 进行处理，并对其进行修改
- 执行一些其他的操作，如日志记录、API 调用等
- 接着调用下一个中间件，并将结果传递给它
- 最后将结果返回到 Store 中
这里是一个简单的中间件示例：
----- ------ - ----- -- ---- -- ------ -- - -------------------------- --------------------------- ------- --- ------ - ------------ ----------------- ------- ----------------- ----------------------------- ------ ------ - ------ ------- ------
该中间件将 action 的类型、内容和下一个状态打印到控制台上，以便我们可以查看并调试应用程序的状态。在代码中使用它非常简单：
------ - ------------ --------------- - ---- ------- ------ ------ ---- --------------------- ------ ----------- ---- ------------------ ----- ----- - ------------------------ ------------------------
现在，当我们在应用程序中触发 action 时，将自动调用 logger 中间件函数，并在控制台中输出相应信息。
编写自定义中间件
我们现在来编写一个带有异步操作的自定义中间件。
首先，我们需要确定我们要处理的 action 类型。让我们假设我们有一个 TODO 应用程序，它将从一个 API 加载待办事项列表。我们需要使用异步操作来加载这些待办事项，并将它们添加到 Redux store 中。
我们需要处理加载待办事项的 action。我们将在这里使用 Redux-thunk 来编写我们的中间件。这个库可以允许我们编写使用 dispatch 函数的异步操作。
让我们先安装它：
--- ------- ----------- ------
现在，我们可以编写我们的自定义中间件：
------ - ------------- - ---- --------
------ - -------- - ---- --------------------------
------ - -------------------- - ---- ------------------------
----- ------------- - ----- -- ---- -- ------ -- -
-- ------------ --- --------- -
----------------------------- -- -
---------------------------------------------------
--
-
------ ------------
-
------ ------- -------------它检查 action 的类型是否为 ADD_TODO，如果是，则使用 fetchTodoList 函数调用 API。然后它将结果使用 store.dispatch 方法返回到 Store 中。
最后，我们需要在我们的应用程序中使用中间件：
------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ ------------- ---- ---------------------------- ------ ----------- ---- ------------------ ----- ----- - ------------------------ ---------------------- ---------------
现在我们的中间件被注册到 Redux 中，并可以处理我们的异步操作了。
总结
中间件是用于扩展 Redux 功能的非常有用的工具。它们可以用于各种用例，包括异步操作、日志记录和错误处理。
在本文中，我们深入了解了 Redux 中间件的概念，并进行了自定义中间件的编写和使用。如果您需要更多的 Redux 和 React 学习资源，请查看Redux 官方文档和React 官方文档。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6496ec9648841e9894419b44