Разработчики React-Redux: должен ли "глубокий" компонент быть подключен к Redux или получать реквизиты от родительских компонентов? - PullRequest
Новая
       9

Разработчики React-Redux: должен ли "глубокий" компонент быть подключен к Redux или получать реквизиты от родительских компонентов?

0 голосов
/ 14 декабря 2018

Я создаю приложение для обмена мгновенными сообщениями, используя React и Redux во внешнем интерфейсе.У меня есть такие компоненты, как «Main» (инициализирует веб-сокет и отображает другие компоненты), «Chat», «FriendsList» и «Friend»

Я часто задаюсь вопросом, стоит ли мне подключать ребенка иливнук напрямую в Redux (если он ему нужен) или передать эти реквизиты от родителя / деда.

Например, я отображаю "Чат" в компоненте Main следующим образом: 

 <Chat
    onTyping={this.onTyping}
    onSubmitMessage={(value) => { this.submitMessage(value) }}
    messages={this.props.messages[this.props.activeFriend] || []}//This comes from Redux
    isMessagingAvailable={this.isMessagingAvailable()}    
  />

Как видите, я передаю реквизит "messages", который, в свою очередь, исходит от Redux.Конечно, я мог бы просто подключить Chat к Redux самостоятельно.

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

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Имхо, это действительно зависит от ситуации:

1) Если дочерний компонент потребляет данные независимо, он всегда получает данные из одной и той же ветви глобального дерева состояний: я бы подключил его к Redux.

  • Компонент TaskList, который всегда получает список задач из state.tasks

  • Компонент CurrentUserDetail, который всегда получает информацию о пользователе из state.currentUser

2) Если дочерний компонент потребляет данные в зависимости от своего родителя: я бы взял данные от родителя через реквизиты.Или получите инструкции от родителя о том, как взять данные из глобального состояния, затем подключите их к Redux и получите соответствующие данные:

  • Компонент Task, который получает данные задачи из своего родительского компонента TaskList для каждогоtask

  • Компонент TaskList, который получает taskListID от своего родителя, а затем получает соответствующий список задач.Например: taskListID = "Martin" -> state.tasks ['Martin']

0 голосов
/ 14 декабря 2018

TL; DR;

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

Эти компоненты не должны зависеть от внешнего мира (, то есть Redux Store ).

В моем понимании структура любого приложения должна быть такой:

  • У вас есть компонент корневого уровня, который служит их цели.Например: input box
  • Тогда у вас есть составной компонент, который будет использовать эти корневые компоненты.Как и обработка меток ошибок вместе с вводом.
  • Тогда у вас есть форма компонентов высшего порядка ( HOCs ).Это бизнес-компоненты и имеют контекст того, что происходит.Эти компоненты должны иметь доступ к хранилищу Redux.

Пример:

Позволяет создать форму с базовой информацией:

  • Имя
  • Фамилия
  • Возраст
  • Электронная почта

Для такой формы вам понадобятся следующие компоненты:

  • Компонент ввода текста
  • Компонент ввода чисел с логикой предотвращения / проверки текста.

Вы можете использовать textInput для FirstName, lastName и email.Поэтому, если вы напрямую привязываете его к хранилищу, вы делаете его зависимым от вашей собственной структуры редукса.Таким образом, эти компоненты нельзя использовать где-либо еще.

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

Ваш вариант использования.

У вас есть следующие модули:

  • Основной
  • Чат
  • FriendsList
  • Друг

В будущем вы планируетедобавить еще несколько модулей:

  • AI / Bot чат
  • Group Chat

Теперь окно чата для индивидуального, бота и группового чата будет похожено структура магазина будет сложной.Специально для группового чата.

Итак, как вы решаете, какой компонент следует связать для хранения?

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

Так что в вашем случае у вас будут следующие HOC:

  • Прямой чат
  • Bot Chat
  • Групповой чат
  • Контакты
  • Панель инструментов

И вы можете иметь следующий компонент просмотра:

  • Компонент чата: Используется длявсе типы чатов.
  • Компонент контакта: используется для списка друзей / просмотра контактов
  • Компонент списка: используется для контакта в браузере, добавления просмотра участников и управления просмотром участников.
...