有没有办法让两个独立的组件拥有自己的 Flux 实例来共享一个 Flux 存储？

Posted 2023-02-22

【中文标题】有没有办法让两个独立的组件拥有自己的 Flux 实例来共享一个 Flux 存储？

【英文标题】：Is there any way for two independent components, with their own instances of Flux, to share a single Flux store?

【发布时间】：2016-10-18 10:42:48

【问题描述】：

假设我有两个反应组件。

组件 A 是网站所有者可以添加到其网站的电子商务商店。这包含商店的产品，网站的访问者可以选择要添加到购物车的商品。

组件 B 是一个购物车组件，网站所有者可以选择将其添加到他们网站的标题中。

我想解决的一个基本用例如下：

用户访问网站并将商品添加到购物车 组件 A 执行更新共享购物车商店的操作 此购物车商店提醒组件 B 进行更改 组件 B 通过从购物车商店获取新的购物车信息来更新其状态 新计数反映在标题中

在网站上，像 A 和 B 这样的组件被称为“插件”。当主站点呈现其页面时，它会遍历要在页面上呈现的插件列表。这些插件中的每一个都是相互独立的。

我的问题是，有没有办法让这些插件中的两个被传递到同一个商店，或者订阅同一个商店，而无需与主父组件交互？

如果这不可行，我的下一个解决方案是将组件 A 和 B 容纳在容器组件 X 中。X 将是一个持有状态和业务逻辑的提供者。 A 和 B 将仅包含视图逻辑。 X 将作为插件呈现，但在页面上不可见，并管理 A 和 B 的状态。

如果我采用这种容器方法，有没有办法从容器中提取 A 和 B，以便在它们链接到同一个商店后独立渲染它们？

【问题讨论】：

你走了多远？这听起来像是一个全球商店会解决的问题。像 redux 之类的东西，也许是：redux.js.org.

开发非常深入。该基础父组件非常固定。现在我正在为需要独立存在的网站本身创建一堆这些插件。我正在使用fluxible而不是redux。问题是主站点是一个全局环境，而这些插件是添加到页面的独立环境。

【参考方案1】：

我使用 ReactJS 使用 Reflux 或 Redux 完成了类似的操作（我更推荐）。

基本上，我会将购物车和电子商务商店分成两个与 Redux 商店直接联系的智能或容器组件。

在 Redux 中，我们有一个数据 Store，但我们可以有多个 reducer（在 store 中基本上是不可变的对象）。

这将是流程：

1) 用户通过点击产品将产品添加到购物车。 2) 组件 A 发送更新购物车的操作 3) Redux Store 更新了一个购物车项目，这会触发购物车向 Component B 添加一个新项目，因为我们刚刚向 Store 添加了一个新对象。 this.state = shoppingCartItems: [id: 1, name: item1, price: $29.00 ]

本质上，在 Redux 中，一个 Store 中有两个 reducer。一个用于商店（跟踪所有产品），一个用于购物车（跟踪所有当前添加的项目）。

这是另一个 Redux 示例，您可以从中获得灵感，这是一个购物车示例

https://github.com/reactjs/redux/tree/master/examples/shopping-cart