在具有多个子组件实例的 React App 中访问 Redux 状态的最佳方法

Optimal Approach for Accessing Redux State in React App with Multiple Instances of Child Components

提问人:Chathura Buddhika 提问时间:11/17/2023 最后编辑:Chathura Buddhika 更新时间:11/18/2023 访问量:32

问:

我正在开发一个使用 Redux 作为状态管理系统的 React 应用程序。在应用程序中,我有一个父组件,其中包含同一子组件的多个实例。

现在,我面临着如何有效地访问所有子组件中相同的 Redux 状态的决定。我确定了两种可能的方法:

直接访问:独立于每个子组件访问 Redux 状态,导致对该状态的多次访问。

间接访问:访问父组件中的 Redux 状态,并将该值向下传递给所有子组件,以确保该状态只读一次。

考虑到性能影响,哪种方法更优化?是否有任何最佳实践或注意事项可以帮助我在性能和可维护性方面做出明智的决定?

更新:我知道根据 Redux 文档,当每个组件都需要自己的数据而不是相同的数据集时,最好采用上面解释的第一种方法。但是,在我的特定情况下,我需要来自 Redux 的相同数据集。这仍然适用于我的情况吗?

javascript reactjs redux

评论


答:

1赞 Valentin 11/17/2023 #1

Redux 风格指南强烈建议直接访问:

连接更多组件以从存储中读取数据

更喜欢将更多 UI 组件订阅到 Redux 存储,并在更精细的级别读取数据。这通常会带来更好的 UI 性能,因为当给定状态发生更改时,需要呈现的组件更少。

例如,不仅仅是连接一个组件和 读取整个用户数组,检索 所有用户 ID,将列表项呈现为 ,以及 已连接并从中提取自己的用户条目 商店。

这适用于 React-Redux connect() API 和 useSelector() 钩子。

建议这样做,因为当您连接父组件以为子组件提供数据时,当状态更改时,将导致更多工作。

评论

1赞 Chathura Buddhika 11/18/2023
我同意上面的说法,即每个用户组件都需要自己的用户条目,而不是相同的数据集。但是,在我的特定情况下,我需要来自 Redux 的完全相同的数据集。这仍然适用于我的情况吗?