Reactjs React-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())
}

我需要做一个减速器，它可以：

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

我不熟悉使用Redux工作流，解决这一问题的最佳方法是将roomList设置为immutable.js对象，或者编写一些代码来深度克隆我的state对象

此外，state.roomList还将从未来的功能中推送新数据

---

summy/Question:当在状态中进行如此深度的更改时，在reducer中返回新状态对象的最佳方式是什么，还是应该更改Redux状态对象的结构

---

我所做的最终似乎是不变的。使用Immutable可以减少react渲染时间，并且满足所有项目要求。此外，在项目中使用新库而不进行重大更改也为时过早。

还原剂成分： 将简化程序分解为更小的部分，以便简化程序足够小，可以处理简单的数据结构。在您的情况下，您可能有：

roomListReducer

listItemsReducer

listItemReducer

。然后在每个减速机上，它将使您更容易阅读您正在处理的状态的哪一部分。这很有帮助，因为您的每个reducer都在处理一小段数据，您不必担心诸如“我应该深度复制还是浅层复制”之类的问题

不可变的 我个人不使用

immutable.js

，因为我更喜欢处理普通对象。为了采用新的API，需要修改的代码太多了。但是，我们的想法是，确保状态更改总是通过纯函数完成的。因此，您只需编写自己的helper函数即可完成所需操作，只需确保在处理复杂对象时对其进行彻底测试即可

---

或者简单地说，您可以在每个reducer中深度复制您的状态，并在副本中进行变异，然后返回副本。但这显然不是最好的方法。

首先，惯用的Redux鼓励您“规范化”您的状态，并尽可能将其平坦化。使用由项目ID设置关键字的对象来允许直接查找项目，使用ID数组来表示顺序，并且在一个项目需要引用另一个项目的任何地方，它只存储另一个项目的ID而不是实际数据。这允许您对嵌套对象进行更简单的查找和更新。看

另外，看起来您当前正在Redux状态下直接存储许多函数。从技术上讲，这是可行的，但它肯定不是惯用的，并且会破坏诸如时间旅行调试之类的功能，因此它非常不受欢迎。Redux常见问题解答提供了有关的更多信息

编辑：

---

作为后续工作，我最近在Redux文档中添加了一个新的部分，主题是。特别是，本节包括关于和的章节，以及。

您有问题吗？当在状态中进行如此深入的更改时，在减速器中返回新状态对象的最佳方式是什么，或者我应该改变Redux state对象的结构吗？@StevenBayer我错过了一些重要的东西吗？通过分解我的reducer，我仍然会得到一些复杂的对象，它们只是嵌套程度稍低一些。没有什么重要的遗漏，只是一个有用的链接，以防其他人用谷歌搜索这个问题。@StevenBayer您的状态树将保持不变。但在每个reducer中，您将处理更简单的数据结构。对不起，我在帖子里不清楚。此外，您并不总是需要

combineReducer

。减缩器只是将

状态

和

动作

作为参数的函数。您可以在reducer函数中调用另一个reducer函数来减少每个reducer的责任。我不确定如何在

state.roomLists

上实现子reducer，对于

state.roomLists[n].listItems[n]

更是如此。sub Reducer的sun功能加起来不是一个深度克隆吗？这似乎是最“正确”的答案，将文本函数存储在状态是一个快速修复，在发布之前将更改为更传统的方法。当然。您可能会看到的一种相关方法是，在您的状态中存储某种过滤器名称或标识符，然后将其作为键，在组件或选择器中查找实际的过滤器函数，类似于在管理对话框组件时建议的方法。例如，所有链接都已断开。我们最近更新了文档构建工具，该工具更改了URL。它应该重定向旧的URL，但这似乎不起作用。我会更新链接。