Контейнер Redux отображает коллекцию, какие параметры передать?

Question

Мы используем React + Redux, и это хорошо. Но есть одна ситуация, я никогда не знаю, какую стратегию использовать.

Когда мне нужно перебрать коллекцию, я могу написать:

1. передать элемент

Код:

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

2. Передать элемент распространения

Код:

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

3. Передать удостоверение личности

Код:

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)

4. Все в одном файле:

Код:

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

• Решение № 4 не пригодно для повторного использования, поэтому не очень интересно.
• Мне не нравится решение № 2, так как атрибуты утоплены в других
• Я считаю, что № 3 - самый чистый, так как он с меньшими зависимостями и переадресованным реквизитом. Самый большой компромисс в том, что запускать .find для каждого ElementItem

Так что я думаю, что это первый, который выигрывает. Но у меня такое ощущение, что это не избыточный способ ведения дел, не так ли? Если я передам параметр element, почему я не передам больше? Тогда мы теряем все преимущества изоляции container от presentation компонентов, не так ли?

Answer 1

Решения № 1 и № 2 прекрасно, потому что в этом случае ElementItem является компонентом представления и получает свои данные от реквизита.

Решение № 3 не имеет смысла, потому что компонент, зацикливающийся на коллекции, уже получил часть состояния состояния (либо потому, что этот компонент подключен к Redux, либо потому, что он получил его от props).

В документации по редуксу есть пример , где они отображают коллекцию задач: они используют 2 компонента представления: Todo, один элемент задачи и TodoList, список, показывающий задачи , Затем есть контейнерный компонент, VisibleTodoList, который вычисляет список видимых задач из состояния и отображает их, используя TodoList. Вы можете использовать ту же стратегию, когда хотите перебрать коллекцию.

Еще один момент: если вы не хотите использовать find для получения нужного элемента, вы можете нормализовать ваше состояние , поэтому каждая «таблица сбора» хранит элементы в объекте с идентификаторами из предметов в качестве ключей. Таким образом, вы можете получить правильный предмет, как это:

const element = state.collection[elementId];