javascript - 具有 ListView 和详细 View 的实体的 Redux 状态形状

Question

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

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

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

在上面的例子中，1 和2 是来自数据库的id。这似乎是合乎逻辑的方式，但我如何处理这样一个事实，即在 ListView 中我没有获得我最终想要的每辆车的所有数据？我的状态最初是否只包含每辆汽车的 品牌 和 年份，然后每次用户转到详细信息页面时我都会修改这些单独的条目？

例如，在 ListView 页面上，它看起来像:

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 类型的痛苦。

另一种方法是为 ListView 和详细数据设置单独的状态。但这会导致存储中出现重复数据。

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

Answer 1

是的，您所说的方法称为“规范化”，是推荐的方法。参见 the Redux FAQ entry on storing relational data , Structuring Reducers - Normalizing State Shape文档页面和 Redux Techniques#Normalization我的部分React/Redux links list有关该主题的更多信息。