2

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

我想知道在flutter中使用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 来规范化状态。类似于此处的显示方式： https ://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1#.2e55tu6wb

但是有了这个，我不确定如何构造状态和减速器，以便能够在单个实体上工作而不会导致完整的列表重新渲染。以及如何将 Widget 连接到此状态内的单个实体。有没有人对此有任何经验并且可以指导我一个方向？

4

1 回答 1

0

首先，规范化状态只是一种范式，因此它适用于任何形式的状态管理。您需要规范化状态的第一件事是通过某种方式唯一标识您想要规范化的模型（很可能是一个 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: ...
    );
  }
)
于 2018-09-10T02:06:59.077 回答