【问题标题】:State Variables vs Redux in ReactReact 中的状态变量与 Redux
【发布时间】:2023-03-14 16:47:01
【问题描述】:
这两种情况中的哪一种更受欢迎?
-
使用状态变量存储来自后端/服务器的值,并直接在页面上存在的所有组件(例如:DataTable)中使用它。
-
在调用 API 时,该数据将加载到 Redux 存储中。因此,请直接在所有组件中使用来自 redux 存储的数据。
【问题讨论】:
标签:
reactjs
react-redux
primereact
【解决方案1】:
案例 1:何时使用本地反应状态
React 状态存储在本地组件内。当需要与其他组件共享时,通过 props 向下传递。实际上,这意味着您的应用程序中需要访问可变值的最顶层组件将在其状态下保存该值。如果它可以被子组件改变,你必须传递一个回调来处理子组件的变化。
案例 2:何时使用 Redux 状态管理
使用 Redux 时,状态全局存储在 Redux 存储中。任何需要访问某个值的组件都可以订阅 store 并获得对该值的访问。通常,这是使用容器组件完成的。这集中了所有数据,但让组件很容易获得所需的状态,而无需周围的组件知道它的需求。
【解决方案2】:
应该首选案例 2。
当数据在多个组件中使用并且来自后端时,您应该将其存储在 redux 状态。
【解决方案3】:
在 redux 中保留任何可以称为“应用程序状态”的状态。如果该对象以某种方式定义了您的应用程序的某些部分,而不仅仅是组件的状态(例如 showSpinner、isEditMode 等),那么它就是您的应用程序状态,应该保存在 redux 存储中。这就是我对差异的定义。另外,请注意,您应该始终在您的 redux 存储中只保留 JSON 可序列化对象。另外,我主要认为来自后端的数据是“应用程序状态”的一部分。
所以我认为你的数据应该存储在redux中。从技术上讲,在您的案例中使用 redux 存储时您具有优势,因为 redux 仅在数据更改时才会触发组件更新。因此,在这里使用它也可能会给您带来一些性能优势。