Question

对于我的实体Car，我有一个列表视图，可以从API获取所有汽车并呈现他们的make和year。但是，API only 会在列表视图页面上返回这些字段。当用户点击其中一个列表项时，他们会转到该汽车的详细信息页面，在那里他们会获得更多信息，例如description，color，price等。

在Redux中管理此数据的推荐方法是什么？一种可能性是存在单个state.cars属性，在该属性下存在所有汽车数据，例如

state.cars = {
  1: {
    id: 1,
    make: "Toyota",
    year: 1994
    color: "Red"
    ...
  },
  2: ...
}

在上面的示例中，1和2是数据库中的ID。这似乎是合乎逻辑的方式，但我如何管理这样的事实：在列表视图中我不能获得我最终想要的每辆车的所有数据？我的州最初是否只包含每辆车的make和year，然后每当用户转到详细信息页面时我都会修改这些条目？

例如，在列表视图页面上，它看起来像：

state.cars = {
  1: {
    id: 1,
    make: "Toyota",
    year: 1994
  },
  2: {
    id: 2,
    make: "Honda",
    year: 1994
  },
  ...
}

然后，如果用户点击了第二个项目，状态将最终看起来像：

state.cars = {
  1: {
    id: 1,
    make: "Toyota",
    year: 1994
  },
  2: {
    id: 2,
    make: "Honda",
    year: 1994,
    color: "Blue",
    description: "Awesome car!",
    price: 9500
  },
  ...
}

这似乎是一种很好的方法，因为它维护了汽车数据的单一事实来源。缺点是现在我可以为每辆车提供的数据可能不同。这将增加我的组件的复杂性，并可能产生一些Flow类型的痛苦。

另一种方法是为列表视图和详细数据提供单独的状态片段。但这会导致商店中的数据重复。

是否有推荐的方法来处理此类问题？

Answer 1

是的，您所谈论的方法称为＆＃34;规范化＆＃34;，是推荐的方法。有关该主题的详情，请参阅the Redux FAQ entry on storing relational data，Structuring Reducers - Normalizing State Shape文档页面和Redux Techniques#Normalization的React/Redux links list部分。

具有列表视图和详细视图的实体的Redux状态形状

1 个答案: