终极版。如何为两个不相关的组件存储相同的数据并避免冲突

时间:2018-04-25 18:09:29

标签: reactjs redux

我有两个组件 - 组件A和组件B.

组件A:

  • 使用某些API提取项目
  • 将检索到的项目放在Redux商店中,让我们说应用程序状态对象中的items属性
  • 显示项目数

组件B:

  • 使用相同的API获取项目,但提供分页信息(因此有服务器端分页)
  • 将Redux商店中检索到的项目放入应用程序状态对象
  • 中的相同项属性
  • 在列表中显示检索到的项目

用户场景:

步骤1.用户打开组件A.

步骤2.用户转到组件B。

由于两个组件在应用程序状态对象中共享相同的属性,因此一旦用户打开组件B,他就会立即看到组件A先前在商店中提取的项目。组件B开始提取项目并在数据检索时重新呈现。因此,显示由组件A提取产生的项目是不可取的。

这里的目标是解耦两个用户场景 - 使用组件A和组件B - 并停止相互影响的组件。

如果我在app状态对象中创建两个单独的属性 - 它将违反Redux最佳实践,则数据将被非规范化。让我们说两个属性 - appState.itemsCount和appState.items。

我有一个属性 - 组件相互影响。

请告知有关如何处理此类情况的最佳做法。

0 个答案:

没有答案