介绍
Redux 是一个流行的 JavaScript 应用程序状态管理库。其中一个核心概念是 action
。action
是一个描述应用程序发生了什么的简单 JavaScript 对象,其包含一个 type
属性和一个可选的 payload
属性。action
被分派给 reducer
来更新应用程序的状态。
action
可以同步或异步。同步 action
是一个简单的对象,它被立即分派给 reducer
。异步 action
是一个函数,可以执行异步操作,然后再分派一个普通的同步 action
。
通常,我们如何选择同步或异步 action
?在这篇文章中,我们将探讨该如何进行选择,并提供使用同步和异步 action
的示例代码。
同步 action
同步 action
是最简单的 action
。例如,下面的 increment
action
递增计数器:
----- --------- - - ----- ------------------- --
increment
表示一个简单的对象,该对象会立即被分派给 reducer
。这种类型的 action
适用于代表简单的状态更改,例如更新文本框或标志位的值等。
异步 action
异步 action
允许我们执行异步操作,例如从 API 获取数据,然后再更新状态。考虑以下代码段:
----- -------- - -- -- - ------ ---------- -- - ---------- ----- -------------- --- --------------------------------- ---------------- -- ---------------- ------------ -- - ---------- ----- -------------- -------- ----- --- --- -- --
loadData
是一个异步 action
。当我们分派 loadData
时,它返回一个函数,该函数接受 dispatch
函数作为参数。在该函数中,我们可以执行任何异步操作,例如调用 fetch
API 来获取数据。一旦数据可用,我们分派一个普通的同步 action
来更新应用程序状态,以便反映已加载数据的实际顶部。
异步 action
最常用于处理从 API 加载数据等复杂操作。这些操作可能需要很长时间才能完成,并且您不希望阻塞应用程序的其他部分,直到操作完成。
如何选择同步或异步 action
如果您只需要更改普通状态值,则使用同步 action
。如果您需要执行复杂的异步操作来更改状态,则使用异步 action
。总的来说,同步 action
用于处理多数用例,而异步 action
仅用于处理复杂的异步操作。
如果您不确定应该选择同步还是异步 action
,请考虑通过如下方式解决问题:
- 如果您需要执行任何异步操作,请选择异步
action
。 - 如果您只需要更改普通状态值,请使用同步
action
。
示例代码
----- --------- - - ----- ------------------- -- ----- -------- - -- -- - ------ ---------- -- - ---------- ----- -------------- --- --------------------------------- ---------------- -- ---------------- ------------ -- - ---------- ----- -------------- -------- ----- --- --- -- --
这是一个简单的示例代码,展示了同步和异步 action
分别是如何用于处理简单和复杂的状态更改的。您可以根据需要修改这些代码,并将它们与应用程序中的实际应用程序进行集成。
结论
在 Redux 中,action
是描述状态更改的对象。action
可以是同步或异步的。同步 action
是一个简单的对象,异步 action
是一个函数。同步 action
用于处理大多数状态更新操作,而异步 action
用于处理从 API 加载数据等复杂操作。如果您不确定应该选择同步还是异步 action
,请考虑执行异步操作和使用异步 action
。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/673566860bc820c5824e393b