我是Redux的新手,我正在尝试再次使用它来构建一个旧的React应用程序,以进行学习。我在逻辑放置位置上遇到了一个障碍。
我给人的印象是,使操作和简化器在逻辑上尽可能简单是可行的方法,但是这使我在组件本身内部有了一些逻辑。对我而言,在此设置中使用表示性和容器组件是有意义的,但我还想确保自己完全掌握了使用Redux传递数据的方式。
例如,我有:
ProductContainer
Product
我有一个ProductContainer组件,该组件检查是否已“选择”该组件,而Product只是用于显示描述的表示性标记和用于“ select”的按钮。
我的商店中还有一个selected_products对象,其中包含当前选中的所有产品。
显然,用户单击了Product组件,但是我会添加逻辑以直接从该组件中将其添加或删除到所选产品的存储中吗?还是我会在ProductContainer父级中触发一个函数来检查selected_products,然后触发“添加”操作或“删除”操作?
谢谢!
最佳答案
我将采用的方法是在分配了动作的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
希望这可以帮助。