Javascript 使用Redux时，将事件从表示组件传递到容器组件是否是反模式？

我对Redux非常陌生，我正在尝试再次使用它构建一个旧的React应用程序，以学习。我在逻辑上遇到了一点障碍

我的印象是，保持动作和减缩器尽可能简单是明智的做法，但这让我在组件内部有了一些逻辑。对我来说，在这个设置中使用表示和容器组件是有意义的，但我还想确保我完全掌握了使用Redux传递数据的方式

例如，我有：

ProductContainer
  Product

我有一个ProductContainer组件，它检查组件是否“选中”，还有一个产品，它只是一个表示性标记，用于显示说明，还有一个按钮用于“选择”

我的商店中还有一个selected_products对象，其中包含当前选定的所有产品

显然，用户单击了产品组件，但是我会直接从该组件添加逻辑，将其添加或删除到所选产品的存储中吗？或者我是否会触发ProductContainer父级中的函数来检查所选的产品，然后触发“添加”操作或“删除”操作

---

谢谢

不要过度考虑整个“表象”和“容器”概念。它们是有用的心智模型，但不是任何你必须遵循的绝对模式。我在下面的React/Redux链接列表中有几篇讨论这些模式的文章的链接

我倾向于将大部分逻辑放在组件之外，放在实际的创建者中。我最近写了一篇关于这个话题的博文：

---

也没有任何东西说“减缩器必须尽可能简单”。有时可能很简单，有时可能很复杂。完全取决于你自己的应用程序和你自己的喜好。有关更多信息，请参见Redux文档中的这些部分：和。

不要过度考虑整个“表示”和“容器”概念。它们是有用的心智模型，但不是任何你必须遵循的绝对模式。我在下面的React/Redux链接列表中有几篇讨论这些模式的文章的链接

我倾向于将大部分逻辑放在组件之外，放在实际的创建者中。我最近写了一篇关于这个话题的博文：

---

也没有任何东西说“减缩器必须尽可能简单”。有时可能很简单，有时可能很复杂。完全取决于你自己的应用程序和你自己的喜好。有关更多信息，请参见Redux文档中的这些部分：和。

我的方法是在调度操作的

ProductContainer

中使用逻辑函数来处理添加和删除操作。然后，这些函数作为道具传递给

产品
组件，以便可以在按钮或任何东西中调用它们

例如：

// ProductContainer.js 
import React from 'react'
import Product from './Product'

export class ProductContainer extends React.Component { 
  constructor(props) {
    super(props)
    this.handleRemoveProduct = this.handleRemoveProduct.bind(this)
    this.handleAddProduct = this.handleAddProduct.bind(this)
  }

  handleRemoveProduct(productId) {
    // do your remove here
  }

  handleAddProduct(productDetails){
    // do your adding here
  }

  render() {
    return (
      <Product handleAddProduct={this.handleAddProduct} handleRemoveProduct={this.handleRemoveProduct} />
    )
  }
}

export default ProductContainer

//ProductContainer.js
从“React”导入React
从“./产品”导入产品
导出类ProductContainer扩展React.Component{
建造师（道具）{
超级（道具）
this.handleRemoveProduct=this.handleRemoveProduct.bind（this）
this.handleAddProduct=this.handleAddProduct.bind（this）
}
HandlerRemoveProduct（产品ID）{
//你要在这里搬走吗
}
handleAddProduct（产品详细信息）{
//你在这里加什么
}
render（）{
返回(
)
}
}
导出默认ProductContainer

然后

//Product.js
从“React”导入React
导出常量产品=（道具）=>{
const{handleedProduct，handleRemoveProduct}=props
渲染（）{
返回(
我的方法是在
ProductContainer
中使用逻辑函数来处理添加和删除操作，然后将这些函数作为一个道具传递给
Product
组件，以便在按钮或任何东西中调用它们

例如：

// ProductContainer.js 
import React from 'react'
import Product from './Product'

export class ProductContainer extends React.Component { 
  constructor(props) {
    super(props)
    this.handleRemoveProduct = this.handleRemoveProduct.bind(this)
    this.handleAddProduct = this.handleAddProduct.bind(this)
  }

  handleRemoveProduct(productId) {
    // do your remove here
  }

  handleAddProduct(productDetails){
    // do your adding here
  }

  render() {
    return (
      <Product handleAddProduct={this.handleAddProduct} handleRemoveProduct={this.handleRemoveProduct} />
    )
  }
}

export default ProductContainer

//ProductContainer.js
从“React”导入React
从“./产品”导入产品
导出类ProductContainer扩展React.Component{
建造师（道具）{
超级（道具）
this.handleRemoveProduct=this.handleRemoveProduct.bind（this）
this.handleAddProduct=this.handleAddProduct.bind（this）
}
HandlerRemoveProduct（产品ID）{
//你要在这里搬走吗
}
handleAddProduct（产品详细信息）{
//你在这里加什么
}
render（）{
返回(
)
}
}
导出默认ProductContainer

然后

//Product.js
从“React”导入React
导出常量产品=（道具）=>{
const{handleedProduct，handleRemoveProduct}=props
渲染（）{
返回(