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

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 的 componentWillMount 内部，我发送了一个操作 fetchProjects，它从服务器获取项目列表并将它们放入商店。

在 Project 的 componentWillMount 内部，我发送了一个操作 selectProject，将当前 projectId 设置为路由中的 projectId，并进行一些额外的客户端处理存储在项目中的图像。

我遇到的问题是两个动作是同时派发的，selectProject失败了，因为fetchProjects还没有完成，而且里面没有项目商店。

我在某处读到，最好在商店中保留较少的数据，这就是为什么我只使用 projectId 从项目列表中提取所选项目，而不是在 Project 组件并使 selectedProject 字段成为项目的副本。

有什么办法可以让这两个action按顺序派发，这样在派发selectProject的时候项目就在store里面吗？我不能让 fetchProjects 也派遣 selectProject 因为 ProjectListing 还没有选定的项目。在 Project 组件中获取一个项目而不是依赖商店中已有的所有项目是否更有意义？我对 react-redux 还是很陌生，所以我不知道最佳实践。

Answer 1

根据您一次获取所有项目的决定，我看到两个选项：

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

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

React-redux best way to select item from list

reactjs

react-router

redux

react-redux