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

Posted 2023-02-22

【中文标题】如何在 Redux 状态下保持秩序？

【英文标题】：How to keep order in Redux state?

【发布时间】：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 并实现我自己的，如果这是好的做法）

【参考方案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 也使用了这种方法，并为其提供了一些自动化。