Можно ли передать весь объект состояния Redux в компонент React?

Question

У нас есть компонент, которому нужен доступ к хранилищу Redux.

import React from 'react'
import { connect } from 'react-redux'

const Component = (props) => {
   ... code ...
}

Мы подключили этот компонент к хранилищу, используя connect.

export default connect(mapStateToProps)(Component)

Теперь нам нужноопределите mapStateToProps для передачи в качестве первого аргумента connect.

const mapStateToProps = state => ({ ...state })

Почему или почему это не приемлемый подход для внедрения данных в компонент?Приведет ли это к повторной визуализации этого компонента в каждой ситуации, которая вызывает рендеринг?

Документация и примеры приветствуются.

Демонстрационное приложение

К вашему сведению: яделая это для второй части этого видео и рассматривая его в качестве окончательного решения.Хотелось бы узнать мысли Стэка об этом коде.

Answer 1

Я считаю плохой идеей передавать все состояние Redux в компонент.

Хотя ваш компонент сегодня использует все переменные хранилища, в будущем это может быть другая ситуация..

Представьте себе, что в будущем вы или другие люди создадите много новых компонентов, которые обрабатывают свои переменные в магазине.Ты видишь?Первые компоненты будут получать много ненужных данных.

Answer 2

Он будет перерисовываться только на реквизитах, которые фактически использует компонент, React умный как этот. Тем не менее, мое личное предпочтение - не передавать весь объект, возможно, его будет проще кодировать, но оно гораздо менее многословно.

const mapStateToProps = state => ({ ...state })

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

const mapStateToProps = state => ({ 
  primary,                                    
  secondary,
  myComponentActive: active                                   
})

Теперь, когда кто-то читает ваш код, он точно знает, что происходит.

Это также дает вам лучший обзор, если вы когда-нибудь захотите перейти на React Hooks, опуская объект mapStateToProps. Несмотря на то, что до сих пор ведутся дискуссии о будущем Хукса, я нахожу это очень удобным. Это не очень полезно для вашего видео, хотя вы можете обсудить возможность переключения!