Question

我们正在使用React + Redux，并且运行良好。但是有一种情况我永远都不知道该使用哪种策略。

当我需要遍历集合时，我可以这样写：

传递元素

代码：

render() {
  collection.map(element => <ElementItem key={element.id} element={element} />)
}

传递价差元素

代码：

render() {
  collection.map(element => <ElementItem key={element.id} {...element} />)
}

传递ID

代码：

render() {
  collection.map(element => <ElementItem key={element.id} id={element.id} />)
}

和ElementItem.js中的

：

connect((state, ownProps) => {
  element: state.collection.find(_el => _el.id === ownProps.id)
})(ElementItem)

全部集中在一个文件中：

代码：

render() {
  collection.map(element => <li key={element.id}><p>{element.name}</p></li>)
}

第4种解决方案不可重用，因此没有太多意义。
我不喜欢解决方案2，因为属性被其他人淹没了
我发现＃3是最干净的，因为它是依赖关系较小且转发的道具较少的那个。最大的折衷是为每个.find发动ElementItem

所以我想这是第一个获胜的人。但是我感觉这不是做事的 redux-way ，不是吗？如果我传递了element参数，为什么我不传递更多？然后，我们失去了从container组件中分离presentation的所有好处，不是吗？

Answer 1

解决方案＃1和＃2非常好，因为在这种情况下，ElementItem是一个表示性组件，并且从道具中接收了数据。

解决方案3毫无意义，因为在集合上循环的组件已经获得了状态的集合部分（要么是因为该组件已连接到Redux，要么是因为它是从props获取的）。

在redux文档中，有一个example在其中呈现待办事项的集合：它们使用两个表示性组件：Todo（一个待办事项）和TodoList（一个列表）显示待办事项。然后是一个容器组件VisibleTodoList，该组件从状态计算可见的待办事项列表，并使用TodoList显示它们。当您要遍历集合时，可以使用相同的策略。

另一点：如果您不想使用find来获取正确的商品，则可以normalize your state，因此每个“收集表”都将商品存储在具有ID的ID的对象中项目作为键。这样，您可以获得像这样的正确商品：

const element = state.collection[elementId];

Redux容器呈现了要传递哪些参数的集合？

1 个答案: