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

Question

对于我的实体Car，我有一个列表视图，它从 API 中获取所有汽车并呈现它们的make和year. 但是，API仅在列表视图页面上返回这些字段。当在一个列表项的用户点击，他们然后去详情页面汽车，在那里他们得到更多的信息，如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

是的，您所说的方法称为“标准化”，是推荐的方法。有关该主题的更多信息，请参阅有关存储关系数据的 Redux FAQ 条目、Structuring Reducers - Normalizing State Shape文档页面以及我的React/Redux 链接列表的Redux Techniques#Normalization部分。