如何在 Redux 状态下保持秩序？答案

【问题标题】：How to keep order in Redux state?如何在 Redux 状态下保持秩序？
【发布时间】：2018-12-10 02:46:16
【问题描述】：

我读到过在 Redux 中使用数组作为状态对象是不可取的。所以不应该有state = [ {}, {}, {} ]，而是state={ "id1": {}, "id2": {}, "id3": {} }。

我有一个返回用户数组的 API 端点。我主要想按照每个用户在数组中出现的顺序显示每个用户。

在这样的用例中，是否仍不建议将其保存为状态数组？问题似乎是我需要按特定顺序显示用户，但我也确实有时需要通过id 访问用户，所以我很困惑这里的常用策略是什么(1) 保持顺序并(2) 以快速有效的方式（通过 id）访问每个对象？

编辑：我为每个用户对象使用了 mongodb id，所以 id 和顺序不会简单地匹配。所以它不像对象没有。 1（就顺序而言）也有 id 1。（虽然我当然可以忽略 mongos id 并实现我自己的，如果这是好的做法）

【问题讨论】：

标签： arrays json reactjs redux state

【解决方案1】：

我的团队使用的策略是让状态看起来像这样

const state = {
  byID: {
    id: Object
  },
  ids: ["1", "2"...] // array of ids 
}

为了显示数据，我们有一个列表组件，它订阅 id 数组并遍历它们。然后，我们拥有为 id 数组中的每个项目呈现的单个项目组件，它接受 id 作为列表中的道具，并且它还订阅 byID 对象。然后它使用传入的 id 从 byID 对象中检索要呈现的确切项目。

这种方式顺序将保持不变，同时仍为您提供将状态存储在对象而不是数组中的所有好处。

单项组件示例。

class Person extends React.Component {
  render() {
    return (
      <div>
        <span>{this.props.person.firstName}</span>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    person: state.people.byID[ownProps.id]
  }
}

【讨论】：

这看起来超级有趣！你能解释一下单项组件的外观吗，我似乎没有遵循那部分。
@R.Kohlisch 我在我的答案中添加了一个示例代码 sn-p，希望这可以澄清它。
redux-toolkit 中的createEntityAdapter 也使用了这种方法，并为其提供了一些自动化。