Question

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

我想知道在flux中使用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来规范状态，该EntityState包含所有不同的规范化实体。与此处的显示类似： https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1#.2e55tu6wb

但是与此有关，我不确定如何构造状态和化简器以能够在单个实体上工作而不会导致完整的列表重新呈现。以及如何在此状态下将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: ...
    );
  }
)

如何在Flutter / Redux中处理归一化状态

1 个答案: