Question

我正在编写一个react-redux应用程序，主要由一系列项目组成。有两个主要组件，一个显示所有项目ProjectListing，另一个显示所选项目Project。我希望Project组件绑定到路由，所以我也使用react-router。我的路线设置如下：

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={ProjectListing} />
    <Route path="/project/:projectId" component={Project} />
  </Route> 
</Router>

redux商店的布局如下所示：

{
  projects: [
    {
      id: <some-uuid>,
      imageUrl: '/image.png',
    },
    {
      id: <other-uuid>,
      imageUrl: '/other-image.png',
    }
  ],
  selectedProject: <some-uuid>, // null signifies no selected project
}

在App的{{1}}内，我发送一个动作componentWillMount，从服务器获取项目列表并将它们放入商店。

在fetchProjects的{{1}}内部，我发送了一个动作Project，它将当前的projectId设置为路径中的一个，并对其进行一些额外的客户端处理。存储在项目中的图像。

我遇到的问题是两个操作同时被调度，componentWillMount失败，因为selectProject尚未完成，并且商店中没有项目

我在某处读到最好在商店中保留较少的数据，这就是为什么我只使用projectId从项目列表中提取所选项目，而不是在{{1}中获取单个项目} component并将selectProject字段作为项目的副本。

有没有办法让两个动作按顺序分派，以便在fetchProjects被删除时项目在商店内？我无法Project也发送selectedProject，因为selectProject还没有选定的项目。获取fetchProjects组件中的一个项目而不是依赖已经存在于商店中的所有项目更有意义吗？我对react-redux仍然相当新，所以我不了解最佳实践。

Answer 1

依靠您决定一次获取所有项目，我看到两个选项：

保留isLoading标志以指示数据是否仍在提取。将此标记映射到Project中的mapStateToProps，然后使用componentWillRecieveProps在数据准备就绪时有条件地选择项目（if (!nextProps.isLoading && nextProps.projects) { ... }）。 注意：请注意您使用的条件，只需在projectId更改时以及数据准备就绪时选择一次项目。
如果项目列表仅与这两条路线相关，而不是您应用中的任何其他路线，则可以在ProjectListing或Project（而不是App中提取数据1}}），无论哪个先装入。
在这种情况下，您可以使用单个动作创建者，一旦成功获取数据（fetchProjects(projectIdToSelect)或类似的东西），可选择选择特定项目。

React-redux从列表中选择项目的最佳方式

1 个答案: