redux - 用户看到深层嵌套状态的一部分，可见属性应该在顶层吗？

Question

我正在开发一款游戏。最初，用户在一个地牢中，具有以下属性:

// state

{
  health: 95,
  creatures: [ {}, {} ],
  bigBoss: {},
  lightIsOn: true,
  goldReward: 54,
  // .. you get the idea
}

现在有很多王国，很多地下城，我们可能想异步获取这些数据。

是否更好地表示用户状态中的深层嵌套结构，在加载时有效地缓存所有其他可能的地牢，以及每次我们想要更新属性(例如操作 TURN_ON_LIGHT ) 我们需要准确找到我们正在谈论的地牢，或者每次我们移动到新地牢时更新顶级属性？

下面的状态表示嵌套。大多数信息与我的表现对象和 Action 无关，它们只关心用户当前所在的一个地牢。

// state with nesting

{
  health: 95,
  kingdom: 0,
  dungeon: 1,
  kingdoms: [
    {
      dungeons: [
        {
          creatures: [ {}, {} ],
          bigBoss: {},
          lightIsOn: true,
          goldReward: 54
        }
        {
          creatures: [ {}, {}, {} ],
          bigBoss: {},
          lightIsOn: false,
          goldReward: 79
        }
        {
          //...
        }
      ]
    }
    {
      // ...
    }
  ]
}

阻碍我的事情之一是所有干净的 reducer ，以前只能采取像 TURN_ON_LIGHT 这样的操作并更新顶级属性 lightIsOn，允许非常直接的 reducer 组合，现在必须进入状态并根据我们当前所在的 kingdom 和 dungeon 更新正确的属性。是否有组成可以保持清洁的 reducer 的好方法？

Answer 1

在 Redux 中处理嵌套或关系数据的推荐方法是对其进行规范化，类似于构建数据库的方式。使用带有 ID 的对象作为键，将项目作为值以允许通过 ID 直接查找，使用 ID 数组来指示排序，并且需要引用项目的状态的任何其他部分应该只存储 ID，而不是项目本身。这使您的状态更加平坦，并使更新给定项目更加直接。

作为其中的一部分，您可以在 UI 中使用多级连接组件。 Redux 的一种典型技术是让一个连接的父组件检索多个项目的 ID，并呈现 <SomeConnectedChild itemID={itemID} />。对于每个 ID。然后连接的 child 将使用该 ID 查找自己的数据，并将数据传递给它下面的任何表示性 child 。从该子树派发的操作将引用项目的 ID，reducer 将能够基于该 ID 更新正确的规范化项目条目。

Redux FAQ 对此主题有进一步的讨论:http://redux.js.org/docs/FAQ.html#organizing-state-nested-data . https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#redux-performance 上关于 Redux 性能的一些文章描述“传递 ID”方法，以及 https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f也是一个很好的引用。最后，我只是在 https://github.com/reactjs/redux/issues/1824#issuecomment-228609501 给出了一个规范化状态的例子。 .

编辑:

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