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

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

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