2

假设我有两个反应组件。

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

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

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

  1. 用户访问该网站并将商品添加到他们的购物车
  2. 组件 A 执行更新共享购物车商店的操作
  3. 此购物车商店向组件 B 发出更改警报
  4. 组件 B 通过从购物车商店获取新的购物车信息来更新其状态
  5. 新计数反映在标题中

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

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

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

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

4

1 回答 1

0

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

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

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

这将是流程：

1）用户通过单击产品将产品添加到购物车。2) 组件 A 发送更新购物车的操作 3) Redux Store 更新了购物车商品，这会触发购物车向组件 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

于 2016-06-17T06:10:45.737 回答