DEV Community
·
每个组件实例的作用域 Redux 存储（在 React 中实现真正的状态隔离）
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
Redux 通常是单例的，但可以为每个组件实例创建独立的 Redux 存储。通过工厂模式和本地提供者与切片，确保每个实例拥有独立的状态。这种方法适用于需要模块化和状态隔离的应用。
🎯
关键要点
- Redux 通常是单例的，但可以为每个组件实例创建独立的 Redux 存储。
- 适用于需要模块化和状态隔离的应用场景，如多个相同功能的实例、独立嵌入的微前端组件和动态用户界面。
- 第一步：创建一个存储工厂，以便为每个使用场景创建一个 Redux 存储。
- 第二步：创建一个本地提供者，动态注入自己的存储。
- 第三步：构建一个本地切片，该切片仅存在于作用域存储中。
- 第四步：在组件中使用，每个实例将拥有完全独立的 Redux 状态。
- 每个 ScopedStoreProvider 创建一个全新的 Redux 存储，存储对其子树是私有的，避免状态冲突。
- 优点包括实例之间的绝对隔离和无状态冲突的风险，适合嵌入 Redux 组件到第三方 UI 中。
- 缺点包括更多的内存使用和需要额外配置的 DevTools，跨实例共享状态更困难。
- 替代方案包括 Zustand 和 Recoil，设计上更自然地支持局部/全局状态混合。
- 如果需要真正的组件级隔离，使用作用域存储是一个强大的模式，但在传统应用中并不总是必要。
❓
延伸问答
如何为每个组件实例创建独立的 Redux 存储？
可以通过创建一个存储工厂和本地提供者来实现，每个组件实例使用独立的 Redux 存储。
使用作用域存储的主要优点是什么？
主要优点是实例之间的绝对隔离，避免状态冲突，适合嵌入 Redux 组件到第三方 UI 中。
使用作用域存储有哪些缺点？
缺点包括更多的内存使用、需要额外配置的 DevTools，以及跨实例共享状态更困难。
什么情况下适合使用独立的 Redux 存储？
适合用于需要模块化和状态隔离的应用场景，如多个相同功能的实例和动态用户界面。
如何在组件中使用作用域存储？
在组件中使用 ScopedStoreProvider 包裹需要使用独立状态的子组件。
有哪些替代方案可以实现局部/全局状态混合？
替代方案包括 Zustand 和 Recoil，它们设计上更自然地支持局部和全局状态的混合。
➡️
