在编写前端应用程序时，状态管理是重要的一环。Redux 是 React 生态系统中最常用的状态管理工具之一，它提供了可预测性和可测试性的机制来简化应用程序的管理。
但是在复杂的应用程序中，Redux 可能需要大量的样板代码来处理异步行为，比如数据加载和提交。这就是 redux-task 包的作用。
安装
首先，您需要使用 npm 包管理器安装 redux-task。在终端中运行以下命令：
npm install redux-task
使用 redux-task
创建任务
要使用 redux-task，需要创建一个名为 Task 的对象来处理异步行为。
在这个例子中，我们将使用 Axio 库来发出 HTTP 请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------
------ -------- ----------- -
------ --- -------------- -------- -- -
-----------------------------
-------- -- -----------------------
----- -- ----------------
---
-在这个例子中，我们导入 Axios 库和 Task 对象。然后定义一个名为 loadUsers 的函数，它返回一个新的 Task，该任务使用 Axios 库获取用户数据。
我们将 success 和 failure 作为 Task 的参数，以便回调函数可以访问这些函数。在任务完成时，如果成功，将调用 success 并使用相应的数据作为参数，否则将调用 failure。
处理任务
我们在 Redux 中使用 redux-thunk 中间件来处理异步逻辑，但是在使用 redux-thunk 时，Redux 的 dispatch 方法返回一个 Promise，而不是 Action 对象。这使得在使用 redux-thunk 处理多个异步操作时，控制流程变得复杂。
这时，redux-task 就派上用场了。我们可以使用 Task 对象来表示异步操作，并将它们分发给 Redux store。
-- -------------------- ---- -------
------ - ------ - ---- -------------
------ - --------- - ---- ----------
-------- ----------------- -
------ - ----- ------------ --
-
-------- ------------------------ -
------ - ----- --------------- -------- ----- --
-
-------- ---------------- -
------ -------- -- -
----------------------------
------ ---------
--------------------------------- -- -------------------------
--
--
-
这里，我们定义了一个名为 loadUsersAsync 的动作创建函数，该函数将触发一个异步请求并在请求成功时分派另一个 action。
loadUsersAsync 中的 handle() 方法将异步操作包装在一个 Task 对象中，并传递给 dispatch()。当任务完成时，handle() 会分发带有正确数据的第二个动作。success() 期望一个回调函数，它接收调用成功时的数据，并返回一个带有加载数据的 Action。
Reducer
在 reducer 中，我们需要根据 Action 类型更新 state。
function usersReducer(state=[], action) {
switch (action.type) {
case 'LOAD_USERS': return state;
case 'USERS_LOADED': return action.payload;
default: return state;
}
}在这个例子中，我们定义了一个名为 usersReducer 的 reducer，用于处理用户加载操作的 Action。当 LOAD_USERS 事件被调用时，它不会更改状态，而是返回原始状态。当事件类型为 USERS_LOADED 时，它返回action中的 payload 字段（即加载的用户数据）。
示例代码
更完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------ - ---- -------------
-------- ----------- -
------ --- -------------- -------- -- -
-----------------------------
-------- -- -----------------------
----- -- ----------------
---
-
-------- ---------------------- ------- -
------ ------------- -
---- ------------- ------ ------
---- --------------- ------ ---------------
-------- ------ ------
-
-
-------- ----------------- -
------ - ----- ------------ --
-
-------- ------------------------ -
------ - ----- --------------- -------- ----- --
-
-------- ---------------- -
------ -------- -- -
----------------------------
------ ---------
--------------------------------- -- -------------------------
--
--
-
现在您可以使用 loadUsersAsync 派发异步操作，而无需处理 Redux state 或处理多个 Promise（而且代码更具可读性）。
总结
redux-task 提供了在 Redux 应用程序中处理异步代码的简单方法，以及更容易使用 Redux 的承诺（Promise）。
它让编写涉及 Redux 的异步代码变得更容易，而无需过多考虑复杂性和细节。使用该库可以提高代码的抽象级别，从而帮助您更好地组织和管理代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cb2