reactjs - React-Redux 复杂(深层)状态对象

Question

鉴于我的初始 redux 状态是:

const state = {
  currentView: 'ROOMS_VIEW',
  navbarLinks: List([
    {name: 'Rooms', key: 'ROOMS_VIEW'},
    {name: 'Dev', key: ''}
  ]),
  roomListsSelected: {group: 0, item: 0},
  roomLists: [
    {
      name: "Filters",
      expanded: true,
      listItems: [
        { icon: 'images/icon-warning.svg', name: 'Alerts', filter: room => room.hasAlert },
        { icon: 'images/icon-playlist.svg', name: 'In Progress', filter: room => room.progress > 20 },
        { icon: 'images/icon-playlist.svg', name: 'Almost Done', filter: room => room.progress > 90 },
        { icon: 'images/icon-playlist.svg', name: 'Complete', filter: room => room.status === 'complete' },
        { icon: 'images/icon-playlist.svg', name: 'Recently Completed', filter: room => false },
        { icon: 'images/icon-playlist.svg', name: 'All Rooms', filter: room => true }
      ]
    }
  ],
  rooms: List(generateRooms())
}

我需要制作一个 reducer 来执行此操作:

state.roomList[n].expanded = !state.roomList[n].expanded

我刚开始使用 Redux 工作流程，解决这个问题的最佳方法是使 roomList 成为一个 immutable.js 对象，或者编写一些代码来深度克隆我的状态对象。

state.roomList 还将从 future 的功能中推送新数据。

总结/问题:在状态深处进行这样的更改时，在 reducer 中返回新状态对象的最佳方法是什么，或者我应该更改 Redux 状态对象的结构吗？

我做了什么 最后，Immutable 似乎是正确的选择。 Immutable 有一些技巧可以减少 React 渲染时间，并且满足所有项目要求。此外，在项目中使用新库还为时过早，无需进行重大更改。

Answer 1

首先，惯用的 Redux 鼓励您“规范化”您的状态并尽可能使其扁平化。使用由项目 ID 键入的对象来允许直接查找项目，使用 ID 数组来表示排序，并且在一个项目需要引用另一个项目的任何地方，它只存储另一个项目的 ID，而不是实际数据。这使您可以更简单地查找和更新嵌套对象。请参阅the Redux FAQ question on nested data .

此外，您当前似乎直接在 Redux 状态中存储了许多函数。 技术上是可行的，但它绝对不是惯用的，并且会破坏时间旅行调试等功能，因此强烈建议不要这样做。 Redux 常见问题解答提供了有关 why storing non-serializable values in your Redux state is a bad idea 的更多信息。 .

编辑:

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