Reactjs 有没有办法让两个独立的组件和它们自己的通量实例共享一个通量存储?

Reactjs 有没有办法让两个独立的组件和它们自己的通量实例共享一个通量存储?,reactjs,flux,reactjs-flux,fluxible,react-dom,Reactjs,Flux,Reactjs Flux,Fluxible,React Dom,假设我有两个组件 组件A是站点所有者可以添加到其站点的电子商务商店。这将保存商店的产品,站点的访问者可以选择要添加到购物车中的项目 组件B是一个购物车组件,站点所有者可以选择将其添加到站点的标题中 我想解决的一个基本用例如下: 用户访问站点并将项目添加到购物车中 组件A执行更新共享购物车商店的操作 此购物车商店向组件B发出更改警报 组件B通过从购物车商店获取新购物车信息来更新其状态 新计数反映在标题中 在这个站点上,像A和B这样的组件被称为“插件”。当主站点呈现其页面时,它会运行一个要在页面上呈

假设我有两个组件

组件A是站点所有者可以添加到其站点的电子商务商店。这将保存商店的产品,站点的访问者可以选择要添加到购物车中的项目

组件B是一个购物车组件,站点所有者可以选择将其添加到站点的标题中

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

  • 用户访问站点并将项目添加到购物车中
  • 组件A执行更新共享购物车商店的操作
  • 此购物车商店向组件B发出更改警报
  • 组件B通过从购物车商店获取新购物车信息来更新其状态
  • 新计数反映在标题中
  • 在这个站点上,像A和B这样的组件被称为“插件”。当主站点呈现其页面时,它会运行一个要在页面上呈现的插件列表。每个插件都是相互独立的

    我的问题是,有没有办法让这两个插件在没有主、父组件交互的情况下,被传递到同一个存储区,或者订阅同一个存储区?

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


    如果我使用这种容器方法,是否有任何方法可以从容器中提取A和B,以便在它们链接到同一个存储区后可以独立渲染它们?

    我已经使用ReactJS使用回流或Redux(我推荐更多)完成了类似的操作

    基本上,我会将购物车和电子商务商店分为两个智能或容器组件,这两个组件将与Redux商店直接接触

    在Redux中,我们有一个数据存储,但我们可以有多个还原器(存储中基本上是不可变的对象)

    这就是流程:

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

    本质上,在Redux中,一个存储中有两个减速机。一个用于商店(跟踪所有产品),另一个用于购物车(跟踪当前添加的所有商品)

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


    你走了多远?这听起来像是一个全球商店可以解决的问题。类似redux的东西,可能是:。非常非常深入的开发。那个基础父组件是一成不变的。现在,我正在为网站本身创建一组需要独立存在的插件。我使用fluxible而不是redux。问题是主站点是一个全局环境,而这些插件是独立的环境,可以添加到页面中。