Redux 中使用什么类型的 action 更好
在 Redux 中，action 是一个普通的 JavaScript 对象，它描述了对应的 action 类型和携带的数据。在实际应用中，我们可能会遇到很多不同类型的 action，但不同类型的 action 会对应不同的使用场景和优缺点，因此选择何种类型的 action 更好是需要考虑多方面因素的。
- 同步 action
同步 action 顾名思义是指立即执行并返回结果（例如，用户点击按钮时派发了一个同步 action 来更新状态）。同步 action 往往会包含一个 type 和 payload（载荷，用来携带数据）属性。同步 action 的优点是简单、易于理解，可以直接修改状态，容易编写和调试。
例如：
const increment = (amount) => {
return {
type: 'INCREMENT',
payload: {
amount,
},
};
};- 异步 action
异步 action 是指不会立即返回结果，而是需要等待一定时间才能得到结果（例如，用户点击按钮时派发了一个异步 action 来获取异步数据并更新状态）。异步 action 通常会返回一个函数，这个函数会等待异步操作完成后再派发一个同步 action。
异步 action 的优点是可以处理复杂的业务逻辑，可以处理各种异步操作（例如，网络请求），代码结构更加清晰。异步 action 的缺点是相对于同步 action 来说更加复杂，需要管理状态和副作用，会增加代码量和复杂度。
例如：
-- -------------------- ---- -------
----- ----------------- - ------- -- -
------ -
----- ----------------------
-------- -
------
--
--
--
----- ---------- - -- -- -
------ ---------- -- -
------ -------------------
----------- -- -----------
------------ -- -----------------------------------
--
--- Breaking Change action
Breaking Change action 是指过滤或删除状态中的某个数据。Breaking Change action 往往会包含一个 type 和 payload 属性，payload 属性包含要删除或过滤的数据。Breaking Change action 的优点是可以让代码更加干净、可读和封装，缺点是可能会影响性能和代码的可维护性。
例如：
const deleteTodo = (id) => {
return {
type: 'DELETE_TODO',
payload: {
id,
},
};
};在选择何种类型的 action 时，需要考虑多个因素，包括应用程序的结构、性能、维护成本等。在实际开发中，我们需要权衡这些因素并选择合适的 action 类型。
总结：
同步 action 的优点在于它简单、容易编写和调试。异步 action 的优点在于它可以处理复杂的业务逻辑、处理各种异步操作，代码结构更加清晰。Breaking Change action 的优点在于它可以让代码更加干净、可读和封装。在选择何种类型的 action 时，我们应该综合考虑应用程序的需求和因素，并选择合适的 action 类型。
示例代码：
完整的示例代码可以访问 Redux 官网，这里只提供了一个简单的示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - ----------------------
--
---- ----------------------
------ -
---------
------ ---------------------
--
---- --------------
------ -
---------
------ ------------------------- -- ------- --- -------------------
--
--------
------ ------
-
--
----- --------- - -------- -- -
------ -
----- ------------
-------- -
-------
--
--
--
----- ----------------- - ------- -- -
------ -
----- ----------------------
-------- -
------
--
--
--
----- ---------- - -- -- -
------ ---------- -- -
------ -------------------
----------- -- -----------
------------ -- -----------------------------------
--
--
----- ---------- - ---- -- -
------ -
----- --------------
-------- -
---
--
--
--
----- ----- - -------------------- ------------------------
------------------ -- -
------------------------------
---
-----------------------------
-----------------------------
------------------------------文章完结，希望对大家理解 Redux 中 action 的使用方式有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64995a3948841e989465b397