如何处理flutter / redux中的规范化状态

Question

为了保持我的应用程序尽可能高性能并且代码可测试和可维护，我读到有关规范化redux状态的信息：https://redux.js.org/recipes/structuringreducers/normalizingstateshape

我想知道这样的东西是否可以通过redux的颤振来实现。我有这种状态和视图模型：

class CompetitionState {
 final LoadingStatus status;
 final Competition competition;
}

class Competition {
 final List<Competitor> competitors;
}

class CompetitionPageViewModel {
  final LoadingStatus status;
  final Competition competition;
}

竞争对手的List中的单个竞争者可以根据用户输入或套接字事件动态更改。目前，一个竞争对手内部的变化将导致我的ListView完全重新渲染，因为我连接了这样的视图模型：

return StoreConnector<AppState, CompetitionPageViewModel>(
    distinct: true,
    converter: (store) => CompetitionPageViewModel.fromStore(store),
    builder: (context, viewModel) => CompetitionPageContent(viewModel)
);

有这个问题的解决方案吗？我的第一种方法是通过引入一个EntityState来规范化状态，该状态包含所有不同的规范化entites。与它如何显示类似：https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1#.2e55tu6wb

但有了这个，我不确定如何构建状态和reducers能够在单个实体上工作而不会导致完整的列表重新呈现。以及如何将Widget连接到此状态内的单个实体。有没有人对此有任何意义，可以指导我的方向？

Answer 1

首先，规范化状态只是一种范式，因此适用于任何形式的国家管理。标准化状态需要的第一件事是一种唯一标识要标准化的模型（很可能是ID）的方法，在本例中为Competitor。您可以按照链接到的EntityState示例来完成此操作。基本上你只需要在你所在州的某个地方存储id到Competitor的映射。然后，您将把Competition类更改为：

class Competition {
  final List<int> competitorIds;
}

然后，在您的Flutter ListView中，您可以将每个竞争对手附加到自己的StoreConnector，如下所示：

ListView.builder(
  itemCount: competition.competitorIds.length,
  itemBuilder: (context, index) {
    int competitorId = competition.competitorIds[index];
    return StoreConnector<AppState, Competitor>(
      distinct: true,
      converter: (store) => store.state.entities.allCompetitors[competitorId],
      builder: ...
    );
  }
)