Redux是一个允许JavaScript应用程序中的所有数据保持一致性的状态容器。Redux-thunk是一个Redux的中间件，允许Redux处理异步操作。本文将详细讲解如何使用redux-thunk。
步骤一：安装redux-thunk
在使用redux-thunk之前，需要安装redux-thunk。打开命令提示符或终端并输入以下命令：
npm install --save redux-thunk
步骤二：创建Action
Action是Redux中用于描述应用程序状态更改的普通对象。通过使用redux-thunk，可以创建对象的函数。
例如，下面是一个简单的Action对象：
export const incrementAsync = () => {
return (dispatch) => {
setTimeout(() => {
dispatch({type: 'INCREMENT'});
}, 1000);
}
}在这个例子中，我们定义了一个名为 incrementAsync 的函数，并将其作为一个对象导出。这个函数返回一个函数，这个函数带有一个参数 dispatch。使用 setTimeout 方法，延迟1秒，调用了一个 dispatch({type: 'INCREMENT'}),然后需要在reducer中进行处理。
步骤三：创建Reducer
Reducer函数会检查每个Action的类型，并且根据Action类型来更新应用程序的状态。以下是一个简单的Reducer：
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ------- -----------------
-------- --------------
---在这个例子中，我们定义了一个名为 counterReducer 的函数，负责处理传入的Action。 combineReducers用于创建一个组合Redeucer，将其与 createStore一起使用。
步骤四：创建Store
Store是Redux应用程序的核心，负责管理应用程序的状态。它接受Reducer作为参数，这个Reducer负责处理Action并更新应用程序状态。以下是一个简单的Store：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- -- ------ ------- ------
在这个例子中，我们定义了一个名为 store 的变量，并将其设置为一个Redux应用程序的Store。该Store应用于一个名为 rootReducer 的函数。通过使用 applyMiddleware 方法，我们将 thunk 当作参数来调用store.
步骤五：使用Action
在组件中，我们不直接将Action作为参数使用。我们输入 incrementAsync 并传递给 dispatch 函数。这是因为 incrementAsync 已经异步工作，将通过dispatch异步更新状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - -------------- - ---- ----------------------------
----- ------- - -- -- -
----- -------- - --------------
------ -
-----
---------- - ----- ------
------- ----------- -- ----------------------------------------------
------
--
--
------ ------- --------在这个例子中，我们使用 useDispatch 导入 dispatch 函数。当我们单击按钮时，会调用 incrementAsync 函数，并将其通过 dispatch 函数更新到Store中。
结论
使用redux-thunk可以轻松处理异步操作并更新Redux应用程序状态。总之，在Redux应用程序中使用redux-thunk相对来说还是比较容易的。甚至可以在不同的应用程序中重用其中的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8cfb