Redux 是一个可预测的状态容器，可以为 JavaScript 应用程序提供状态管理。在 Redux 中，action 是一个描述当前状态更改的纯 JavaScript 对象。然而，在某些情况下，我们需要组合多个 action 来完成一个复杂的任务。本文将介绍通过组合多种 Action 以实现更高级操作的技巧和最佳实践。
Action Creators
Action Creators 是一个函数，用于生成 action 对象。以下是一个简单的示例：
function increment() {
return { type: 'INCREMENT' }
}
function decrement() {
return { type: 'DECREMENT' }
}然而，当我们需要组合多个操作时，我们可以使用以下方法来创建更复杂的 Action Creators。
组合 Action Creators
为了组合多个 Action Creators，我们可以使用 redux-thunk 中的 dispatch 和 getState 方法。以下是一个示例：
-- -------------------- ---- -------
-------- ---------- -
------ ---------- --------- -- -
---------- ----- --------------- ---
----- ----- - -----------
----- ----- - ------------
------------------ -- -
---------- ----- --------------- -------- ---- ---
--------------------- -- -
---------- ----- ----------------- -------- ---- ---
-- -- -- -
---------- ----- -------------- -------- ---- ---
---
---
---------- ----- ----------------- ---
-
-在上面的代码中，我们首先分派一个“TASKS_STARTED”操作，然后在执行每个任务之前分派“TASK_STARTED”操作。每个任务完成后调用 runTask 函数。如果任务成功，则分派“TASK_COMPLETED”操作，否则分派“TASK_FAILED”操作。最后，我们分派一个“TASKS_COMPLETED”操作，以表示所有任务都已完成。
简化 Action Creators
当我们需要在应用程序中使用相同的操作多次时，可以通过创建一个简单的 функци来简化 Action Creators。以下是一个示例：
function createTaskAction(actionType) {
return task => ({ type: actionType, payload: task });
}
const taskStarted = createTaskAction('TASK_STARTED');
const taskCompleted = createTaskAction('TASK_COMPLETED');
const taskFailed = createTaskAction('TASK_FAILED');当我们需要使用 taskStarted 操作时，可以将其作为 dispatch 函数的参数。以下是一个示例：
dispatch(taskStarted(task));
结论
在 Redux 中，组合 Action 提供了一种非常强大和灵活的方法来管理状态。通过使用组合和简化 Action Creators 的技巧，我们可以轻松地编写高级操作来满足我们的开发需求。最后，使用这些最佳实践有助于将 Redux 应用程序保持清晰、可读和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67447bacc1a23897ea7781fd