代码之家  ›  专栏  ›  技术社区  ›  R. Kohlisch

如何在还原状态下保持秩序?

  •  1
  • R. Kohlisch  · 技术社区  · 7 年前

    我已经读到,在Redux中使用数组作为状态对象是不明智的。所以一个人不应该 state = [ {}, {}, {} ] 但是相反 state={ "id1": {}, "id2": {}, "id3": {} } .

    我有一个API端点,它返回一组用户。我主要希望按照每个用户在数组中的显示顺序来显示它。

    在这样的用例中,是否仍然不建议将其保存为处于状态的数组?问题似乎是我需要按特定的顺序显示用户,但我也需要 有时需要访问用户 id ,所以我很困惑这里的共同战略是什么 (一) 保持秩序和 (二) 以快速有效的方式(通过ID)访问每个对象?

    编辑: 我正在为每个用户对象使用mongodb id,所以 身份证和订单不完全匹配 .所以它不像1号对象(按顺序)也有ID 1 .(虽然我当然可以忽略Mongos ID并实现自己的ID,如果这是一个好的实践的话)

    1 回复  |  直到 7 年前
        1
  •  2
  •   Chaim Friedman    7 年前

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

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

    为了显示数据,我们有一个列表组件,它订阅ID数组并遍历它们。然后我们有一个单项目组件,它为ID数组中的每个项目呈现,它接受列表中的ID作为属性,并且它还订阅 byID 对象。然后,它使用传入的ID从 比亚迪 要呈现的对象。

    这样一来,顺序将保持圆滑,同时仍能为您提供将状态存储在对象和数组中的所有好处。

    单个项组件的示例。

    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]
      }
    }