减速器应该嵌套吗？

Question

我有一个app，它与 instagram 非常相似，但不是只有一个主要供稿，而是用户 可以根据他/她参加的活动有多个提要。我正在使用 redux 进行状态管理 目前我有这些减速器：

• 饲料
• 人
• 时间表
• 用户
• 导航

我的 feed 减速器看起来像：

{
  allEvents: [],
  event: {
    id: 123,
    name: 'Foo'
  },
  items: [
    {
      id: 23,
      imageUrl: 'http://img.com/foo',
      likes: [{ id: 1, user: {...} }, { id: 2, user: {...} }],
      comments: [{ id: 1, text: '...', user: {...} }, { id: 2, text: '...', user: {...} }]
    }
  ]
}

所以我的状态结构目前看起来像：

{
  feed,
  people,
  schedule,
  user,
  navigation
}

但此刻，每次用户更改当前事件时，整个提要状态都会被替换为 该特定事件的新状态，因此如果用户回到上一个事件，整个提要都需要 要再次获取，人员减速器和时间表也是如此，这取决于事件。 用户也有它自己的个人资料提要，显示用户的提要项目。为了有这个提要，我会 需要复制我在当前 feed reducer 中的内容，所以我认为最好有多个 feed， 内部事件减速器。

我想知道这样的状态结构会不会更好：

{
  events: {
    items: [
      feed,
      people,
      schedule
    ]
  }
  user,
  navigation
}

然后我读到 redux#815 或 redux#994 说这不是嵌套减速器的最佳方式。 它应该看起来或多或少像：

{
  feed: {
    feedIds: [23, 24, 25],
    byId: {
      23: {
        items: [123, 124, 125]
      }
    }
  },
  items: {
    itemsIds: [123, 124, 125, 126, 127],
    byId: {
      124: {
        id: 124,
        image: 'http://img.com ',
        likes: [1, 2, 3]
      }
    }
  },
  likes: {
    likesIds: []
  },
  events: {
    eventIds: [1, 2, 3],
    byId: {
      1: {
        id: 1,
        name: 'TYW Croatia w34'
        feedId: 23,
        peopleId: 12,
        scheduleId: 1
      }
    }
  },
  people: {...}
}

在这种情况下，最佳做法是什么？哪种方式性能最好？

Answer 1

一个标准化的结构，就像你上一个例子一样，绝对是一种最佳实践和更高的性能。状态更平坦，因此更新更有针对性，影响的无关对象更少；可以根据需要通过ID轻松查找项目；并且更新逻辑通常会更简单。此外，这允许您将项目 ID 传递给连接的子组件，然后它们根据该 ID 查找自己的数据，并且它们只需要在自己的数据更改时重新渲染。最后，它适用于缓存数据。

您可能需要阅读Redux performance 上的这些文章以获取更多信息，尤其是High Performance Redux。您可能还想阅读Normalising state and garbage collection 上的一些讨论。

编辑：

作为后续，我最近在 Redux 文档中添加了一个新部分，主题为 "Structuring Reducers"。特别是，本节包括关于"Normalizing State Shape" 和"Updating Normalized Data" 的章节。