React-Redux: Нужно ли использовать connect () и сопоставлять состояние / диспетчеризацию для всех моих компонентов из одного дерева компонентов?Есть ли способ сделать это только один раз?

Question

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

Я изучаю React-Redux и просто любопытно, всегда ли мне нужно использовать connect(), а затем каждый создает mapStateToProps иmapDispatchToProps для всех моих компонентов, включая подкомпоненты?Есть ли разовый способ сделать это?Разве мои компоненты не могут просто получить доступ ко всему хранилищу без привязки каждого состояния / отправки к реквизитам один за другим, что я считаю повторяющимся и отнимающим много времени?

Я приехал из Vue-Фон Vuex (хотя мой опыт работы с Vuex ограничен), а React-Redux - это совсем другой шариковый воск, если не намного более сложный IMO.

Answer 1

С Redux вам не нужно подключать все компоненты к своему хранилищу.Вы подключаете только те компоненты, которые действительно в этом нуждаются.Например, если у подключенного компонента есть дочерние элементы, то может быть проще не подключать детей к Redux, а позволить подключенному родительскому элементу запускать обновления для своих дочерних элементов.Внуки могут быть связаны, но не их непосредственные дети и так далее.Может быть много подходов, и каждый компонент может по-прежнему иметь свое собственное частное состояние в дополнение к хранилищу Redux.

В настоящее время в моде React.FunctionComponent s, и вы можете использовать вместо него useReducer hookconnect, хотя у вас будет меньше возможностей для точной настройки производительности с помощью ловушки.

Answer 2

Согласно записи Redux FAQ «Должен ли я подключить все свои компоненты или только один?» :

В ранней документации Redux рекомендовалось подключить только несколькокомпоненты в верхней части дерева компонентов.Однако время и опыт показали, что такая компонентная архитектура обычно требует, чтобы несколько компонентов слишком много знали о требованиях к данным всех их потомков, и вынуждает их передавать непонятное количество реквизитов.

Подчеркнуть «один компонент контейнера сверху» в примерах Redux было ошибкой.Не принимайте это как максиму.Старайтесь держать ваши компоненты презентации отдельно.Создайте компоненты контейнера, соединив их, когда это удобно.Всякий раз, когда вы чувствуете, что дублируете код в родительских компонентах, чтобы предоставить данные для однотипных дочерних элементов, пора извлечь контейнер.Как правило, как только вы почувствуете, что родитель слишком много знает о «личных» данных или действиях своих дочерних элементов, настало время извлечь контейнер.

Фактически, тесты показали, что большее количество связанных компонентов обычно приводит клучшая производительность, чем у меньшего количества подключенных компонентов.

В общем, попытайтесь найти баланс между понятным потоком данных и областями ответственности с вашими компонентами.

Answer 3

Ваше состояние в redux магазине не меняется, но чтобы его использовать, вы должны использовать connect и подключиться к своему магазину.Если вы не хотите использовать connect, вы можете просто передать свои состояния дочернему компоненту с помощью процедур типа <mycomponent data={this.state.data} /> и использовать свои данные в своем дочернем компоненте. Если эти способы не удовлетворяют, вы можете прочитать о системе контекста, но она является родительской.ребенку снова, но вы можете передать данные от родителя внуку, не используя child

Вы можете прочитать об этом здесь

Надеюсь, это поможет вам.