Redux 是一个非常流行的 JavaScript 应用程序状态管理库，它采用单一数据源的概念，以可预测的方式管理应用程序的状态。Redux 数据流被设计为如下流程：视图层发起一个 action -> action 通过中间件处理 -> 通过 reducer 更新应用程序的状态 -> 视图层重新渲染界面。
在 Redux 中，最常见的中间件是 Redux Thunk。它是一个基于函数的中间件，允许您在 action 中 dispatch 异步操作之前执行逻辑。
运行环境
在运行本文中的示例之前，请确保您已经安装了以下软件：
- Node.js
- npm 或 yarn
安装
您可以使用 npm 或 yarn 安装 Redux Thunk：
npm install redux-thunk --save yarn add redux-thunk
在应用程序中使用 Redux Thunk
为了在您的应用程序中使用 Redux Thunk，您需要在创建 store 时将它添加为中间件。
创建 store
创建 Redux store 的基本方式是使用 combineReducers() 来将所有的 reducer 组合在一起，并使用 applyMiddleware() 来将所有的中间件添加到 store 中。
-- -------------------- ---- ------- -- -- --------------------------- - --------------- --- ----- ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- -- - ------- --------- ----- ----- - ------------ -------------------------- ---------------------- --
在这个例子中，reducers 是包含所有 reducer 的对象。可以使用 combineReducers() 方法将它们合并成一个 reducer。我们还使用了 applyMiddleware() 方法，并将 thunk 中间件作为参数传递给它。
创建 thunk
现在您已经创建了 store，接下来创建 thunk action。
-- -------------------- ---- -------
-- -- ----- ------
------ ----- ---------- - -- -- -------- -- -
----------------------------
-------------------------------- -- -
--------------------------------------
-------------- -- -
-------------------------------------------
---
-
-- ---- ------
------ ----- --------------- - -- -- -
------ -
----- -------------------
--
-
------ ----- ----------------- - ------- -- -
------ -
----- ----------------------
-------- -----
--
-
------ ----- ----------------- - ---------- -- -
------ -
----- ----------------------
-------- --------
--
-在这个例子中，fetchPosts() 是一个 thunk，它返回一个函数，并接收 dispatch 方法作为参数。在这个函数中，我们可以执行异步操作并将结果处理为各个阶段的普通 action。
当异步操作开始时，我们先发送一个 FETCH_POSTS_START action，通知应用程序显示“正在加载”消息。异步操作成功后，我们将数据作为 FETCH_POSTS_SUCCESS action 的有效载荷传递给 reducer。在异步操作失败时，我们发送一个 FETCH_POSTS_FAILURE action 来通知应用程序出现了错误。
调用 thunk
在任何地方调用 thunk 的方式都是相同的。您可以在视图层组件中的 componentDidMount() 方法中调用它，或者在其他组件中调用它。
下面是在 React 组件中调用 thunk 的示例。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- ----- ------- --------- -
------------------- -
------------------------
-
-------- -
----- - ------ -------- ----- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- --------------
-
------ -
----
--------------- -- -
--- -------------------------------
---
-----
--
-
-
----- --------------- - ------- -- -
------ -
------ ------------------
-------- --------------------
------ -----------------
--
-
----- ------------------ - -
----------
-
------ ------- ------------------------ ---------------------------在 componentDidMount() 方法中，我们调用了 fetchPosts() thunk，它会异步加载帖子数据。根据当前状态，组件将显示适当的消息或帖子列表。
结论
Redux Thunk 允许您使用 thunk action 在 action 中间添加逻辑代码。redux-thunk 简单便捷、易于使用，已经广泛应用在各种 Web 应用程序中。使用 Redux Thunk 对于管理异步数据流的应用程序非常有帮助。
以上是 Redux 数据流程中间件使用指南之 thunk 的详细介绍，希望它能对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67052eb6d91dce0dc8524044