如何在 Redux 中处理列表项

Posted 2023-02-22

【中文标题】如何在 Redux 中处理列表项

【英文标题】：How to handle list items in Redux

【发布时间】：2017-04-15 10:02:53

【问题描述】：

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

/list 拉取一些关于一堆对象的通用数据，并在 redux 中将其扔到一个数组中

/list/5 获取列表中一项的详细信息

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

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

问题在于，如果您先进入项目详细信息路线，则列表的检索时间比项目详细信息的检索时间要长。当我尝试更新它在 redux 中的位置时，我不知道数组中的项目索引是什么。

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

不确定我的解释是否正确，但我一直在尝试找到使用 redux 存储内容的正确模式。

【问题讨论】：

查看我在***.com/questions/40898017/… 中的回答，以获取有关规范化数据的信息的链接。

今晚我去看看。谢谢。

@markerikson 如果您添加评论作为答案，我会将其标记为正确。非常有见地和乐于助人，而且我现在使用 redux 获得了更多乐趣。

【参考方案1】：

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

是的，标准化的 Redux 存储是标准推荐。有关更多信息，请参阅我的 React/Redux 链接列表中的 Redux FAQ: How do I organize nested or duplicate data in my state?、Structuring Reducers - Normalizing State Shape 和 Selectors and Normalization 部分。

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

【讨论】：

堆栈溢出的关键在于回答问题并提供示例。应避免链接到其他外部文章。