Question

我是Redux的新手，我正在尝试使用它再次构建一个旧的React应用程序来学习。我在哪里放置逻辑遇到了一些障碍。

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

例如我有：

ProductContainer
  Product

我有一个ProductContainer组件，用于检查组件是否被选中＆＃39;或者不是，产品只是表示标记以显示描述和按钮以选择＆＃39;。

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

显然，用户单击了Product组件，但是我是否会添加逻辑，以便直接从该组件添加或删除到所选产品的存储中？或者我会在ProductContainer父级中触发一个函数来检查selected_products，然后触发“添加”。行动或＆＃39;删除＆＃39;动作？

谢谢！

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

希望这有帮助。

Answer 2

不要过度思考整个＆＃34;演示＆＃34;和＆＃34;容器＆＃34;概念。他们是有用的心理模型，但不是你必须遵循的任何绝对模式。在React Component Patterns下，我有一些文章链接到几篇讨论这些模式的文章，作为我的React / Redux链接列表的一部分。

我倾向于将大部分逻辑放在组件之外，在动作创建者中。我最近写了一篇关于该主题的博客文章：Idiomatic Redux: Why Use Action Creators?。

也没有任何东西可以说＆＃34;减速器必须尽可能简单＆＃34;。有时它们可能很简单，有时它们可能很复杂。完全取决于您自己的应用程序和您自己的偏好。有关详细信息，请参阅Redux文档中的这些部分：FAQ: Where should I put my "business logic"?和Structuring Reducers。

在使用Redux时，是否将事件从presentational传递到容器组件？

2 个答案: