根组件卸载后 Redux 状态仍然存在

Question

我有一个复杂的 React 组件

FileEditor

，它使用 Redux Toolkit 进行内部状态管理。

这个

FileEditor

组件由主 React

App

（不使用 Redux）以这种简单的方式使用：

1. 打开应用程序
2. 打开工作区组件 => 显示文件名列表
3. 单击文件名=>显示

   FileEditor

   加载并显示文件数据
4. 关闭工作区=>不再显示

   FileEditor

   的文件。

我注意到，当我执行这一系列操作时：（1）打开工作区->（2）打开文件->（3）关闭工作区->（4）打开工作区->（5）打开另一个文件，状态

FileEditor

似乎一直坚持行动 (2)。

我本以为当组件卸载时，redux 存储就会消失，并且没有状态持久性。

我通过向我的

FileEditor

组件添加clear() 操作解决了这个问题

  useEffect(() => {
    return () => {
      console.debug(`Unmouting and clearing state`);
      dispatch(actions.clear());
    };
  }, []);

我的问题是：

• 这是预期的 Redux 行为吗？即使保存状态的根组件卸载，该状态也会保留？这是为什么？
• 这个配置

  <AppNoRedux><ComponentWithRedux/></AppNoRedux>

  不推荐吗？
• 未来的配置

  <AppNoRedux><ComponentWithRedux key="1"/><ComponentWithRedux key="2"/></AppNoRedux>

  会导致状态干扰问题吗？

感谢您的宝贵时间！

Answer 1

将 Redux 逻辑移至专用 App 组件：

创建一个新的组件（App）来包装您现有的App逻辑并使用Redux Toolkit来管理状态。 将 FileEditor 组件移至启用 Redux 的 App 组件内。 这集中了状态管理并防止混合问题。 考虑多个 FileEditor 实例的共享存储：

如果您计划拥有多个 FileEditor 实例，请探索以下选项： Redux Persist：该库允许您跨会话持久保存状态，但需要仔细配置以避免冲突。 Redux Thunk 或 Saga 中间件：使用它们来管理 FileEditor 组件内的异步数据获取和状态更新，而无需依赖为每个实例创建不必要的存储。 通过遵循这些建议，您可以实现更清晰、更可预测且可扩展的应用程序结构，用于管理 React 应用程序中的状态。