Reactjs React redux从列表中选择项目的最佳方式_Reactjs_Redux_React Router_React Redux

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

reactjs redux

Reactjs React redux从列表中选择项目的最佳方式,reactjs,redux,react-router,react-redux,Reactjs,Redux,React Router,React Redux,我正在编写一个react redux应用程序，主要由一系列项目组成。有两个主要组件，一个显示所有项目，ProjectListing，另一个显示所选项目，project。我希望项目组件绑定到路由，因此我也使用react路由器。我的路线设置如下： redux商店的布局如下所示： { 项目：[ { id:， imageUrl:“/image.png”， }, { id:， imageUrl:“/other image.png”， } ], selectedProject:，//null表示未选择任

我正在编写一个react redux应用程序，主要由一系列项目组成。有两个主要组件，一个显示所有项目，

ProjectListing

，另一个显示所选项目，

project

。我希望

项目

组件绑定到路由，因此我也使用react路由器。我的路线设置如下：

redux商店的布局如下所示：

{
项目：[
{
id:，
imageUrl:“/image.png”，
},
{
id:，
imageUrl:“/other image.png”，
}
],
selectedProject:，//null表示未选择任何项目
}

在

App

的

组件willmount

中，我发送了一个动作

fetchProjects

，它从服务器获取项目列表并将它们放入存储中

在

Project

的

组件willmount

中，我发送了一个操作

selectProject

，它将当前项目设置为路由中的项目，并对存储在项目中的图像执行一些附加的客户端处理

我遇到的问题是，这两个操作同时被调度，

selectProject

失败，因为

fetchProjects

尚未完成，并且存储中没有项目

我在某个地方读到，最好在存储中保留较少的数据，这就是为什么我只使用projectId从项目列表中提取所选项目，而不是在

project

组件中获取单个项目，并使

selectedProject

字段成为项目的副本

有没有办法使这两个操作按顺序分派，以便在分派

selectProject

时，项目都在存储区内？我不能让

fetchProjects

也分派

selectProject

，因为

ProjectListing

还没有选定的项目。获取

项目

组件中的一个项目而不是依赖存储中已经存在的所有项目是否更有意义？我对react redux还比较陌生，所以我不知道最佳实践。

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

保留一个
```
isLoading
```
标志以指示数据是否仍在提取。将此标志映射到
```
mapstatetops
```
中的
```
Project
```
，然后使用
```
componentwillreceiveprops
```
在数据准备就绪时有条件地选择项目（
```
if（！nextrops.isLoading&&nextrops.projects）{…}
```
）。注意：请注意所使用的条件，当
```
projectId
```
更改且数据准备就绪时，您只需选择一次项目
如果项目列表仅与这两条路径相关，而与应用程序中的任何其他路径无关，则可以在
```
ProjectListing
```
或
```
Project
```
（而不是
```
app
```
）中获取数据，以先装载的为准。
在这种情况下，您可以使用单个操作创建者，该创建者可以选择在成功获取数据后选择特定项目（
```
fetchProjects（projectdtoselect）
```
或类似内容）