前言
在日常开发中，我们经常会用到 Redux 来进行状态管理。而在 Redux 中间件中，Thunk 也是一个常用的中间件。Thunk 通过允许我们将函数作为 action 进行 dispatch，使得我们可以进行一些复杂的业务逻辑处理。但是，Thunk 的实现方式一直都是让人迷惑不解的。
在这篇文章中，我们将深入剖析 Thunk 中间件的实现原理，以及如何在项目中使用它。
理解 Thunk 中间件
在 Redux 中，中间件就是一种对 dispatch 函数的增强。Thunk 中间件就是其中一个，它能够对 dispatch 进行一些特殊的处理。具体而言，Thunk 中间件能够允许我们在 dispatch action 时传入一个函数，这个函数可以进行任意的业务逻辑处理，最终再 dispatch 具体的 action。
例如，我们可以定义一个 Thunk action：
const fetchData = () => (dispatch) => {
dispatch(requestData());
fetch('/api/data')
.then((response) => response.json())
.then((data) => dispatch(receiveData(data)));
};这个 Thunk action 的含义是：当我们执行 fetchData 函数时，首先会派发一个 requestData action，然后再去异步请求数据并将数据返回给 receiveData action。因此，我们就可以在项目中使用这个 Thunk action：
dispatch(fetchData());
上述代码中，我们传入了一个 Thunk action，这也是 Thunk 中间件的作用所在。
Thunk 源码解读
让我们深入到 Redux 的源码中来，看一看 Thunk 中间件是如何实现的。
首先，让我们来看一下 Thunk 的代码实现：
const thunk = ({ dispatch, getState }) => (next) => (action) => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};
export default thunk;上述代码中，我们可以看到，Thunk 是一个返回一个函数的函数，这个返回的函数正是 Redux 中间件需要的格式。而这个函数将会接收一个包含 dispatch 和 getState 方法的对象作为参数，然后返回另一个函数。
在返回的这个函数内部，我们同时又返回了一个函数。这个函数接收一个参数 action，并在函数体内进行了判断。如果 action 是一个函数，那么我们就直接执行它并传入 dispatch 和 getState 方法，否则就直接调用 next 方法将 action 传递下去。
因为我们仅仅是对 dispatch 方法进行了一些包装，因此 dispatch 的执行流程仍然是按照执行，但是当我们传入一个函数类型的 action 时，中间件就会进行特殊的处理。这也正是 Thunk 中间件的核心所在。
实战
现在，根据我们对 Thunk 中间件的深度解析，我们可以尝试在项目中使用这个中间件了。
这里我们以一个简单的计数器为例。在这个计数器中，我们需要保存当前的数值，然后我们可以通过点击按钮来增加或减少这个数值。
首先，让我们创建一个简单的 Redux store：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - -------------------- ------------------------我们在创建 store 的时候，使用了 applyMiddleware 和 thunk 中间件。
接下来，让我们来创建几个 action 整合我们的 reducer：
-- -------------------- ---- -------
----- --------------- - -- -- -- ----- ----------- ---
----- -------------------- - -- -- ---------- -- -
------------- -- -
----------------------------
-- ------
--
----- --------------- - -- -- -- ----- ----------- ---
----- -------------------- - -- -- ---------- -- -
------------- -- -
----------------------------
-- ------
--其中，incrementAsyncAction 和 decrementAsyncAction 就是我们的 Thunk action。在这里，我们通过 setTimeout 来模拟异步执行过程。需要注意的是，如果我们要使用异步的 action，一定要在 action 内部进行 dispatch。
最后，在我们的组件代码中，我们可以这样使用它们：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ -
----------------
---------------------
----------------
---------------------
- ---- -----------
----- ------- - -- -- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
------ -
-----
--------------
------- ----------- -- ---------------------------------------
------- ----------- -- ---------------------------------------
------- ----------- -- -------------------------------------------------
------- ----------- -- -------------------------------------------------
------
--
--
------ ------- --------上述代码中，我们通过 useSelector 来接收 count 值，然后通过 useDispatch 来获取 dispatch 方法。我们可以根据用户的不同动作来触发不同的 action，并借助 Thunk 中间件来进行具体的业务逻辑处理。
总结
在本文中，我们对 Redux 中间件 Thunk 的原理进行了深入的学习，同时结合一个简单的计数器示例来演示 Thunk 的使用方法。希望本文对你有所帮助，也希望读者能够在实践中更加熟练地掌握 Redux 中的 Thunk 中间件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ccd3675ad90b6d042cbc0e