Javascript ReactJs-可重用的Redux服务

我理解Redux的操作、减缩器和映射到存储的概念。 我已经能够成功地在我的应用程序中执行Redux

我正在愉快地使用React的contextTypes作为子组件，这些子组件需要来自以前调用过的Redux的数据

然后我遇到了一个奇怪的情况，数据被一个孩子突变了。当我在SO上发布问题时，一位成员告诉我无论如何都应该少用contextTypes

因此，解决我的问题的唯一方法是映射到孩子的父母中的存储区，再次映射到孩子的父母中，，就像父母的更高部分之前所做的那样，并将数据作为道具传递给孩子

但我觉得这一切都错了。是否再次映射到同一存储？为什么？我不明白什么？为什么我必须在每个需要另一个组件映射到的相同数据的组件上写下这些

  export default class Foo extends Component {        

  .....

  // I DID THIS STUFF IN A HIGHER COMPONENT.
  // WHY MUST I REPEAT MYSELF AGAIN?
  // WHAT AM I NOT UNDERSTANDING?

  static propTypes = {
    children: PropTypes.node.isRequired,
    dispatch: PropTypes.func.isRequired,
    products: PropTypes.array
  };

  componentDidMount() {
    const { dispatch } = this.props;  
    dispatch(fetchProductsIfNeeded());
  }

  .....

 }  

---

我看了看容器，但在我看来，容器一次就把所有的哑组件都包在里面了

   <ProductsContainer>
      <ProductsComponent />
      <ProductSpecialsComponent />
      <ProductsDiscountedComponent />
   </ProductsContainer>

这不是我想要的。我想，就像一个服务一样，我可以在每个单独的哑组件中使用该容器，就像这样

   <ProductsContainer>
      <ProductsDiscountedComponent />
   </ProductsContainer>

   <ProductsContainer>
      <ProductSpecialsComponent />
   </ProductsContainer>

   <ProductsContainer>
      <ProductsComponent />
   </ProductsContainer>

现在，为了得到上面所示的3个子组件，它们中的每一个都必须映射到商店，这似乎完全错了

我找不到任何可以解决问题的办法

问题：

有没有一种方法可以让我只映射到一个特定的存储一次，并为那些需要该数据的组件调用该“服务”

如果是，请举例说明

发布脚本：

我想，如果我可以将“映射服务”作为react的纯JavaScript函数来执行，并将该函数导入需要它的组件中，这可能会解决问题，但我没有看到任何Redux存储被映射为react的示例

更新：

我在这里发布了解决方案

---

首先，先说说你过去的问题。确实，上下文不适合这样的事情。你也应该担心你提到的变异。如果您使用的是Redux存储，那么退出它的数据应该始终是不可变的。也许像这样的图书馆会有帮助

---

现在我们来谈谈手头的事情。也许你没有完全理解的是“愚蠢”组件是什么。哑组件应为无状态且纯：

constproduct=（{name，comments}）=>(
{name}
);

组件从道具中获得所需的一切。现在有很多方法可以将数据输入到这个组件中，但它们都是基于道具的。例如，以下是最简单的：

constproductlist=（{products}）=>(
{products.map（p=>）}
);
类应用程序扩展组件{
getInitialState（）{
返回{产品：[]}；
}
组件安装（）{
//连接到商店，等等。。。
}
渲染（）{
返回(
{/*诸如此类*/}
{/*诸如此类*/}
);
}
}

正如您从示例中看到的，整个组件树将从从一个连接传递到存储的简单道具获取其状态。除了

App

，所有组件都是哑的、无状态的和可预测的

但也有一些情况下，通过道具连接整个树是不切实际的，我们需要与我们的商店进行本地化连接。这正是HOC可以提供巨大帮助的地方：

constwithproducts=Comp=>class WrappedComponent扩展组件{
getInitialState（）{
返回{产品：[]}；
}
组件安装（）{
//连接到商店，等等。。。
}
渲染（）{
返回(
);
}
}
const ProductListWithProducts=WithProducts（ProductList）；

现在，我们这样包装的任何组件都将从商店收到产品列表作为道具-无需代码复制。不要重复你自己。请注意，我没有改变

ProductList

或

Product

组件来实现这一点：这些组件太笨了，根本不在乎

您创建的任何React应用程序中的大多数组件都应该非常愚蠢。

---

---

另一方面，你不应该担心打电话给你的商店不止一次。如果您担心这一点，那么存储实现就有问题，因为对存储的调用应该是幂等的。您可以使用操作等来填充存储，但这应该完全独立于从存储获取值。well design存储检索不应有性能或网络损失（同样，使用Immutable之类的库也会有帮助）。

首先，感谢您的帮助。我跟随你的评论。是的，我知道什么是哑巴组件，但再一次，我不能用道具填满每一个受祝福的组件，因为第n代孩子需要这些道具。我假设“ProductListWithProducts”是“服务”。我如何在dumb组件上实现它呢？

ProductListWithProducts

是一个复合组件。它呈现哑组件

ProductList

，但通过添加存储功能对其进行扩展。正如我在上面所写的，它已经在dumb组件上实现了。哑组件从不改变。一旦它这样做了，它就不再是哑巴了。但我仍然注意到，每次使用

WithProducts

HOC，您都会接到商店的电话，这是设计好的。不管怎么说，MVC中没有“服务”，我不知道你在这里是怎么用这个词的。解决方案就在这里。。。。

   <ProductsContainer>
      <ProductsDiscountedComponent />
   </ProductsContainer>

   <ProductsContainer>
      <ProductSpecialsComponent />
   </ProductsContainer>

   <ProductsContainer>
      <ProductsComponent />
   </ProductsContainer>