Часть избыточного состояния повторно отображает (ненужный) весь компонент реакции

Question

Одной из моих частей состояния редуктора (редуктора) является filters редуктор, используемый для хранения настроек фильтра для каждой страницы. Это структура ключевого объекта, поэтому она выглядит так:

{
   dashboard: {
     minDate: '2017-01-01',
     maxDate: '2019-01-01',
     //... other filters
   },
   otherPageKey: {
     //... other filters
   }
}

Моя страница панели инструментов большая, но содержит select, значение которого считывается с редуктора: filters.dashboard.minDate. Код, отвечающий за соединение:

function mapStateToProps({
  filters
}) {
  return {
    filters: filters.dashboard
  };
}

Теперь - всякий раз, когда мы выбираем новую дату из этого выбранного компонента, все дерево filters изменяется, поэтому весь компонент панели инструментов перерисовывается. Как я могу решить эту проблему? Ожидаемый результат состоит в том, что только компонент select, свойство которого изменяется пользователем, должен быть повторно обработан.

Answer 1

Было бы полезно больше кода, но обычно это вызвано тем, что родительский компонент (в данном случае, приборная панель) обнаруживает состояние или реквизиты.

Это может быть вызвано несколькими причинами.

• Вы отображаете родительский компонент, а не конкретный дочерний. Это означает, что родительский компонент обнаруживает изменение и, следовательно, повторно выполняет рендеринг. Ваш mapStateToProps находится в компоненте панели мониторинга, а не только в выбранном компоненте?
• Неправильное использование connect или mapDispatchToProps. Проверьте этот пост для получения дополнительной информации.

Опять же, больше кода было бы полезно, но я надеюсь, что это поможет.