Question

我最近在redux中重构了我的状态以符合指南。

foo: {
  allIds: [1],
  byId: {
    1: {
      properties: [2, 3]
    }
  }
}
properties: {
  allIds: [2, 3],
  byId: {
    2: {text: 'property 2'},
    3: {text: 'property 3'}
  }
}

我已经能够做更多的通用操作了。但现在到处都有，我真的不知道如何处理它们。

我<Foo />组件和<Propertie />。当我的州是一棵树时：

foo: {
  properties: [{text: 'property 1'}, {text: 'property 2'}]
}

我能够（在Foo中）

render() {
  const {properties} = this.props;

  return properties.map(property => <Property entity={property} />) 
}

现在，这更复杂，因为属性已成为ID列表。

我的第一个想法是为属性做一个容器组件：

PropertyContainer.js

const getEntity = id => state.properties.byId[id];

const mapStateToProps = (state, ownProps) => {
  entity: getEntity(ownProps.id)
}

export default connect(mapStateToProps)(Property)

现在，我可以做（在foo中）

render() {
  const {properties} = this.props;

  return properties.map(property => <PropertyContainer id={property} />) 
}

如果它根本不改变我的<Property>组件并且组件更加分离，那么这是很好的部分。不好的部分是我需要创建更多与商店相关的容器组件。父组件（如foo），也与商店高度相关，因为它有ID。

这样做的正确方法是什么？

Answer 1

这可能不是最好的解决方案，但它是我现在所做的：

在foo：

render() {
  const {properties} = this.props;
  return properties.map(property => <PropertyContainer property={property} />
}

这样，我隐藏了我在内部使用id的事实。

在PropertyContainer我只是将id转换为真实实体。

const getPropertySelector = (state, id) => state.properties.byId[id];

const mapStateToProps = (state, ownProps) => {
  const {property: id} = ownProps;

  return {
    ...getPropertySelector(id)
  };
};

使用redux

1 个答案: