使用 redux 初始化全局状态，然后让本地组件状态接管

Posted 2023-02-22

【中文标题】使用 redux 初始化全局状态，然后让本地组件状态接管

【英文标题】：Using redux to initialize a global state then letting local component state take over

【发布时间】：2019-03-27 12:35:25

【问题描述】：

这更多是关于 react 和 redux 的状态设计/最佳实践问题。

我有一个应用程序，它处理三种数据（专辑、帖子、个人资料）并将它们全部呈现在具有无限滚动功能的单个组件 (ScrollGrid) 中。这个组件从 redux 存储中获取一个“上下文”属性，并派生一个 gridContext 来设置布局。

redux 状态如下所示：

 
  context: "posts",
  pages: [[...],[...]],
  currentPage: 0,
  hasMorePages: true,
  isFetching: false,
  tabPosition: 0

当我的 AppRouter 组件第一次挂载时，它会获取一些提要“帖子”数据，将这些数据设置在 redux 存储中，然后将其传递给 ScrollGrid 组件。 ScrollGrid 组件可以向下嵌套多个组件（并且可以与中间组件交互）。

我的问题是，一旦我将初始数据发送到 ScrollGrid，让 ScrollGrid 组件的本地状态处理相同的状态是否是一种好习惯，或者我是否应该始终更新 redux 存储并向下传递道具？从那时起，我将在本地组件状态中模仿 redux 状态，并且仅在数据类型更改时重新初始化 redux 状态并将其传递回去（例如发布到相册）。

【问题讨论】：

longlist使用scrollview效果不佳，大数据采集可以使用flatlist。在 flatlist 中，您无需担心数据大小，因为它仅加载可以占用可用屏幕空间的元素。

ScrollView 这个名字是巧合，这不是一个 react native 应用。我重命名它以避免混淆。

如果数据只限于一个组件，那么最好在本地维护状态。如果数据可以在不同的组件之间共享，那么在 redux 存储中全局维护状态。

【参考方案1】：

找到了解决办法： 组件并没有真正共享相同的状态（帖子、相册和个人资料都不同），尽管无限滚动功能使它们具有相同的属性（页面、currentPage、isLoading 等）。

无限滚动功能需要转换为 util 函数，用于需要它的不同组件。本地状态会比 redux 存储更适合。