前言
我们之前已了解了 Redux 的三大基本原则。 但是，实际情况遇到时，我们会发现在某些情况下，这些原则并不能完全满足我们的需求。本文中，我们将讨论 Redux 中的中间件 (Middleware), 并学习如何使用它来增强或改进 Redux 的功能。
中间件 (Middleware) 是一个函数，它可以调用 dispatch，并且它还具有以下属性：
- 它可以在 action 被发起之后，到达
reducer之前，拦截 action。 - 它可以执行
dispatch，从而继续向下传递 action，或者阻止 action 的继续传递。 - 它可以访问
getState()方法，从而获取当前 store 的状态。 - 它可以访问
dispatch方法以及getState方法从而对 action 进行改变。
为什么需要中间件？
当你开始使用 Redux 时，你可能会遇到一些在处理异步操作时需要进行的额外操作，比如异步数据获取、日志记录、错误处理等等。为了解决这些问题， Redux 就引入了中间件机制。
例如，如果你希望在发出一个 action 时添加一些额外的操作，比如打印 log，那么你可以使用中间件实现这个需求。而且，由于中间件是可重用和可配置的，你可以在不同的情况下，对它们进行组合和使用。
中间件的使用方法
在 Redux 中，中间件是一个函数。通过调用 applyMiddleware 这个函数并传递一个或多个中间件到 createStore，中间件就可以被注册并处理从 dispatch 发出的所有 action。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------------- ----- ----- - ------------ ------------ ---------------------- --
如此注册中间件 thunk 就能够拦截发起的 actions, 在异步操作时在调用 dispatch 并执行其余操作。
Redux 中内置的中间件
applyMiddleware
在上述示例代码中，我们已经看到，Redux 中内置了一个 applyMiddleware 中间件函数。这个函数可以接收一个或多个中间件，并将它们放到一个数组中合并在一起。
thunk
thunk 中间件使得 action 创建函数可以返回一个函数，而不仅仅是一个 action 对象。这个函数可以在 dispatch 方法被调用时，执行异步操作，或者请求数据之后再发出 action 对象。
------ ----- ---- --------
----- ----------- - -- -- ---------- -- -
-----------------------
----------- -- -
----------
----- ----------------
-------- ---------
---
--
------------ -- -
-----------------
---
--logger
logger 中间件使得在 dispatch 方法被调用时，日志记录被打印出来。
----- ------ - ----- -- ---- -- ------ -- - -------------------------- --------------------------- ------- --- ------ - ------------ ----------------- ------- ----------------- ----------------------------- ------ ------ -
全文完整代码：
------ - ------------ --------------- - ---- --------
------ ----- ---- --------
----- --------- - -
--------- ---
--
----- ----------- - ------ - ---------- ------- -- -
------ ------------- -
---- ----------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
--
----- ------ - ----- -- ---- -- ------ -- -
--------------------------
--------------------------- -------
--- ------ - ------------
----------------- ------- -----------------
-----------------------------
------ ------
-
----- ----- - -- --------- -------- -- -- ---- -- ------ -- -
-- ------- ------ --- ----------- -
------ ---------------- ---------
-
------ ------------
-
----- ----- - ------------
------------
---------------------- --------
--
----- ----------- - -- -- ---------- -- -
-----------------------
----------- -- -
----------
----- ----------------
-------- ---------
---
--
------------ -- -
-----------------
---
--
------------------------------结论
本文我们介绍了 Redux 中间件的基本概念和使用方法。中间件可以使 Redux 的功能更加强大和灵活，同时还帮助解决了一些与异步操作相关的问题。在实践中，中间件得到了广泛的应用。因此，学会中间件的使用方法对于前端开发者而言是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f48965f55128102638ac5