在 Redux 中，Thunk 是一种中间件，可以让 Redux 处理异步操作和副作用。本文将详细介绍 Redux 中间件 thunk 的用法、原理以及实际应用。
什么是 Redux 中间件 thunk
Redux 中间件是指在 action 被发起后，到达 reducer 前，需要经过的一层额外处理过程。thunk 是其中一种常用的中间件，它可以让 action creator 返回一个函数而不是对象。
传统的 action creator 返回一个简单的对象，示例如下：
const increment = (value) => ({
type: 'INCREMENT',
payload: value
})而使用 thunk 中间件，则可以返回一个函数，这个函数接收 dispatch 和 getState 两个参数，示例如下：
const incrementAsync = (value) => {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment(value))
}, 1000)
}
}当调用这个函数时，它会异步地执行一个操作，并在操作完成后，调用 dispatch 将数据提交到 store 中。
Redux-thunk 是如何工作的
在 Redux 中，action 创建函数返回的一般是一个对象，这个对象包含了用于更新 state 的必要信息，而这些信息会被中间件捕获，然后进行加工处理。
thunk 允许 action 创建函数返回一个函数，这个函数接收 dispatch 和 getState 两个参数。dispatch 用于向 store 发送 action，而 getState 可以获取当前的 state。
在 Redux 的使用中，如果需要进行异步的操作，就需要派发多个 action，这就导致了一个问题：派发一个 action 的时候甚至无法确保下一个 action 什么时候被派发，因此我们需要使用 redux-thunk 这一插件来解决这个问题。
redux-thunk 的原理非常简单，它就是一个返回函数的函数。当 Redux Store 接收到一个被 thunk 包装过的 function 作为 action 时，它就会将 dispatch 以及 getState 传递给这个函数。然后这个函数就可以在异步操作完成后，使用 dispatch 派发一个新的 action，唤醒 Reducer 。
Redux-thunk 的用法
接下来，我们通过一个具体的例子来说明 redux-thunk 的用法。假设我们需要从服务器端获取数据，并将数据存储在 Redux 的 Store 中，代码如下：
-- -------------------- ---- -------
-- -- ----------- --
------ --------------- ---- -------------
-- -- -------- --------------- ----- ----- --
------ - ------------ --------------- - ---- -------
----- ----- - ------------
--------
--------------------------------
-
-- -- ------
------ -------- ----------- -
------ ---------- -- -
-- ------
---------- ----- ------------------ --
-- --------
------ -------------------------------------- -- -
-- ------
------------- -- -
----------
----- ---------------------
-------- -------------
--
-- -----
---------------- -- -
-- ------
---------- ----- ------------------- -------- ----- --
--
-
-在上述代码中，我们使用了 thunk 中间件来处理异步操作。通过返回一个函数，我们可以在函数内部发起异步请求，并且在请求完成后再进行 dispatch。
总结
上文简要介绍了 Redux 中间件 thunk 的用法、原理以及实际应用。Redux-thunk 允许使用 action creators 返回函数，它们可以进行异步操作或者使用 dispatch（或者自己）而不用受到时序限制。
如果您还没有使用 Redux-thunk，希望这篇文章能够让您更好地理解 Redux-thunk 的用法，同时也希望您能够在日后的工作中更加灵活地使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca33495ad90b6d041a0a96