在 Redux 应用中，异步的数据流操作一直是个难题，Redux 中间件 thunk 提供了一种优雅的解决方案，可以让 Redux 应用的数据流操作更加简洁和高效。
Thunk 中间件可以让 action 创建函数返回一个函数而不是一个 action，用来延迟 dispatch。这个返回的函数接收两个参数：dispatch 和 getState。我们可以使用 dispatch 来手动地 dispatch 一个 action，或者使用 getState() 来获取当前 state。
本文将会讲述如何封装一个可复用的 Redux 中间件 thunk 示例，并阐述一些封装思想。
分析需求
我们假设现在有一个项目，其中需要向服务器发送请求，获取用户信息，并且在获取到信息后，将获取到的用户信息存储到 Redux store 中。
我们可以使用 axios 来进行请求。通常情况下，我们需要通过获取到的响应来创建 actions 并 dispatch。如下所示，我们需要一个 getUserInfo 的 action 创建函数，然后调用 dispatch。
------ ----- ---- -------- ----- ----------- - -------- -- ----- ---------- -- - ----- -------- - ----- --------------------------------- ----- -------- - -------------- ---------- ----- ---------------- -------- -------- --- -- ------------------------------
这里的 action 创建函数返回了一个函数，这个函数可以在请求逻辑结束后，手动 dispatch 一个 action。
但是，这样的写法并不是很方便。因为在每一个需要请求的地方都需要有这样的代码，会大大的增加代码的复杂度，并且很容易出错。
封装思路
我们可以封装一个 Redux 中间件，将这个逻辑细节隐藏起来。这样我们就可以在不同的位置调用同一个 api 请求，而不需要在多个地方写大量冗余代码。
常见的封装思路是将具体的业务逻辑抽象成一个函数，然后通过参数和闭包将整个请求过程在中间件中完成。然后对 action 创建函数进行封装，让其接收一个参数对象，这个参数对象内包含请求需要的参数，然后在中间件中调用函数，并实现自动 dispatch。
这种封装思路，可以很好的减少冗余代码，并且可以让逻辑更加明确，代码更加简洁。
封装实现
------ ----- ---- --------
----- ------------- - -- --------- -------- -- -- ------ -- ----- -------- -- -
-- ------- ------ --- ----------- -
------ ---------------- ----------
-
----- - -------------- ------ -------- ---- - - -------
-- --------------- -- ---------------------- -
------ -------------
-
----- --------- -------- -------- - ------
---------- ----- -------- -------- ---- ---
--- -
----- -------- - ----- ---------------------
----- ------ - --------------
---------- ----- -------- -------- ------- ---- ---
- ----- ------- -
----- ------------ - -------------- - --------------------------- - --------------
---------- ----- -------- -------- ------------- ---- ---
-
--
----- ----------- - -- ------- ---- -- -- --
-------------- - ---- ---------------------- ------- ----- --
------ ------------------------- ------------------------ -------------------------
-----
---
-- -----
---------------------- ------- -- ----- - -------- --------- -----在这个中间件中，我们实现了对请求的中间层处理。如果传入的 action 是一个函数，则会直接调用。如果传入的参数不是一个参数对象，那么中间件会将其传递给下一个中间件。否则，它将从参数对象中提取相应的数据并调用 axios 进行请求，在 dispatch 请求发送和请求完成的 action。
在这个中间件中，我们将 action 创建函数进行了封装，可以更加方便的触发各种请求，并且不需要重复书写大量的代码。在使用时，只需要传递一个参数对象，即可完成各种异步请求。并且请求状态也会自动跟进到 Redux store 中。
这个中间件可以进行更进一步的封装，可以加入 loading 状态的自动处理，请求的错误信息处理，等等。但是，这些功能的实现，都是基于这个中间件的抽象实现。
总结
我们使用了 thunk 中间件，提供了一种更加优雅的方法来处理 Redux 应用中的异步请求。在具体的实现中，我们只需要封装请求的逻辑，然后在中间件中完成自动 dispatch，可以让代码更加清晰明了。
在实际业务中，可能会有不同的需求和场景，但是封装的思路和方法都是相通的。只需要根据不同的业务需求来进行封装，代码的可复用性和扩展性都会得到提高。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649a85be48841e989476b63e