Question

我正在开发admin GUI类型的react应用程序。我正在使用Redux来存储应用程序状态，主要是API调用状态和域对象。域模型具有许多实体类型，并且数据量很小。

我想避免嵌套，并保持状态规范化以避免循环引用。我设计了REST API以标准化形式返回数据。当前状态结构如下：

{
  Foo: {
     byId {
       1: { id: 1, ... },
       2: { id: 2, ... },
       ...
     },
     isLoading: false
     isError: false
  },

  Bar: {
     byId {
       1: { id: 1, fooId: 1, ... },
       2: { id: 2, fooId: 2, ... },
       ...
     },
     isLoading: false
     isError: false
  },
  ...
}

基本上，状态反映了数据库。现在，UI组件有责任对此数据执行“联接”。这是一个伪示例：

// Redux connect omitted
FooListingComponent extends Component {

  // Redux-thunk actions
  componentDidMount() {
    this.props.getFoos() 
    this.props.getBars()
  }

  // Props comes from redux
  // Loading and error handling omitted
  render() {
    return (
      <div>
        { this.props.foos.map(f =>
          <Foo bars={this.props.bars.filter(b => b.fooId === f.id)} />) 
        }
      </div>
    )
  }
}

此解决方案总体上是否还可以，还是应该重新考虑联接逻辑，并可能在Redux存储或组件级的更细粒度级别上对状态进行整形？

反应：Redux状态和关系

0 个答案: