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

Question

我对 Redux 很陌生，我正在尝试使用它再次构建一个旧的 React 应用程序来学习。我在放置逻辑的位置上遇到了一些障碍。

我的印象是，保持操作和化简器在逻辑上尽可能简单是正确的方法，但这让我在组件本身内部有一些逻辑。对我来说，在此设置中使用演示组件和容器组件是有意义的，但我也想确保我完全掌握使用 Redux 传递数据的方式。

例如我有:

ProductContainer
  Product

我有一个 ProductContainer 组件，它检查该组件是否被“选择”，而 Product 只是用于显示描述的表示标记和一个用于“选择”的按钮。

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

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

谢谢!

Answer 1

我解决这个问题的方法是在调度操作的 ProductContainer 中使用逻辑函数来处理添加和删除。然后，这些函数作为 prop 传递给 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

然后

// Product.js
import React from 'react'

export const Product = (props) => {
  const {handleAddProduct, handleRemoveProduct} = props
  render () {
    return (
      <div>
        <Button onClick={handleAddProduct(someData)}
        <Button onClick={handleRemoveProduct(productId)}
      </div>
    )
  }
}

export default Product

希望这有帮助。