如何在Redux中处理列表项

时间:2022-08-22 21:30:36

I have a list view, and a detail view on my application.

我有一个列表视图,以及我的应用程序的详细视图。

/list pulls down some general data about a bunch of objects and throws it into an array in redux

/ list下拉一些关于一堆对象的一般数据,并将其抛入redux中的数组中

/list/5 grabs the details for one of the items on the list

/ list / 5抓取列表中某个项目的详细信息

/list is always called no matter what route you hit on the site, so the list eventually populates

无论您在网站上点击什么路线,都会始终调用/ list,因此列表最终会填充

I figured it would be best to store all of the details of the item when you hit the details route right in the items indexed location in the list array.

我认为当您在列表数组中的项目索引位置中点击详细信息路径时,最好存储项目的所有详细信息。

the problem is that the list takes longer to be retrieved than the items details if you go to the item details route first. I don't know what that items index will be in the array when I try to update it's location in redux.

问题是,如果首先转到项目详细信息路径,则列表需要的时间比项目详细信息要长。当我尝试在redux中更新它的位置时,我不知道数组中的项索引是什么。

Am I handling this wrong? Should I put the details for the items in a separate place in the store? My thinking was that if the user looks at details for an item twice I can check to see if the additional data is already in the list array index, and so I don't need to make another api call. it's just already there, but if it isn't then make the call and pull the additional details

我处理这个错误吗?我应该将商品的详细信息放在商店的单独位置吗?我的想法是,如果用户查看项目的详细信息两次,我可以检查附加数据是否已经在列表数组索引中,因此我不需要再进行一次api调用。它已经存在,但如果不存在,则拨打电话并提取其他详细信息

Not sure if i'm explaining this right but i've been trying to find the right pattern for storing things with redux.

不确定我是否正在解释这一点,但我一直在努力找到用redux存储东西的正确模式。

1 个解决方案

#1


3  

Quoting from my answer at https://*.com/a/40898120/62937:

引用我的回答https://*.com/a/40898120/62937:

Yes, a normalized Redux store is the standard recommendation. See Redux FAQ: Organizing Nested State , Structuring Reducers - Normalizing State Shape, and the Selectors and Normalization part of my React/Redux links list for more information.

是的,规范化的Redux商店是标准推荐。有关详细信息,请参阅Redux FAQ:组织嵌套状态,构造减速器 - 规范状态形状,以及React / Redux链接列表的选择器和规范化部分。

For manipulating relational/normalized data in your Redux store, I recommend a library called Redux-ORM. You should absolutely use Reselect in general, and Normalizr is good for normalizing data you've received, but Redux-ORM provides a useful abstraction layer for querying and updating that normalized data once it's in the store. I've written a couple blog posts describing its use: Redux-ORM Basics and Redux-ORM Concepts and Techniques.

为了在Redux存储中操作关系/规范化数据,我推荐一个名为Redux-ORM的库。你应该绝对使用Reselect,而Normalizr适用于规范化你收到的数据,但Redux-ORM提供了一个有用的抽象层,用于在存储中查询和更新规范化数据。我写了几篇描述其用途的博客文章:Redux-ORM Basics和Redux-ORM Concepts and Techniques。

#1


3  

Quoting from my answer at https://*.com/a/40898120/62937:

引用我的回答https://*.com/a/40898120/62937:

Yes, a normalized Redux store is the standard recommendation. See Redux FAQ: Organizing Nested State , Structuring Reducers - Normalizing State Shape, and the Selectors and Normalization part of my React/Redux links list for more information.

是的,规范化的Redux商店是标准推荐。有关详细信息,请参阅Redux FAQ:组织嵌套状态,构造减速器 - 规范状态形状,以及React / Redux链接列表的选择器和规范化部分。

For manipulating relational/normalized data in your Redux store, I recommend a library called Redux-ORM. You should absolutely use Reselect in general, and Normalizr is good for normalizing data you've received, but Redux-ORM provides a useful abstraction layer for querying and updating that normalized data once it's in the store. I've written a couple blog posts describing its use: Redux-ORM Basics and Redux-ORM Concepts and Techniques.

为了在Redux存储中操作关系/规范化数据,我推荐一个名为Redux-ORM的库。你应该绝对使用Reselect,而Normalizr适用于规范化你收到的数据,但Redux-ORM提供了一个有用的抽象层,用于在存储中查询和更新规范化数据。我写了几篇描述其用途的博客文章:Redux-ORM Basics和Redux-ORM Concepts and Techniques。