Redux / MobX - нужно ли передавать данные в дочерние компоненты через реквизиты в React? - PullRequest
Новая
       18

Redux / MobX - нужно ли передавать данные в дочерние компоненты через реквизиты в React?

0 голосов
/ 29 июня 2018

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

В случае, когда мы используем систему управления состоянием в React, такую ​​как Redux / Mob X, я предполагаю, что основная цель этих методов управления состоянием - предоставить единый источник данных и более структурированный подход к его обновлению.

Скажем, я использую библиотеку управления состоянием (MobX) для React, и предположим, что у меня есть родительский компонент, который выполняет вызов HTTP API и обновляет хранилище MobX ответом API. Теперь мне нужны эти данные в одном из дочерних / вложенных компонентов. У меня вопрос: должен ли я передавать эти данные в качестве опоры дочернему компоненту или я должен разрешить дочернему компоненту подключаться к центральному хранилищу и напрямую получать эти данные?

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

Ожидание ответов.

С наилучшими пожеланиями, Лалита

1 Ответ

0 голосов
/ 09 июля 2018

Это полностью зависит от ситуации. Я бы предложил разделить ваши компоненты на 2 части:

  1. Компоненты, которые могут быть повторно использованы в других проектах
  2. (более высокий уровень) Компоненты, которые настолько специфичны для этого проекта, что, вероятно, никогда не будут использованы повторно.

Для компонентов категории 1 я бы предложил не использовать хранилище mobx напрямую, а вместо этого создавать чисто реагирующие компоненты. (например, подумайте о раскрывающемся списке или компоненте раскрывающегося списка ajax).

Для компонентов второй части (например, заголовок, нижний колонтитул, компоненты раздела, специфичные для вашего сайта). просто заставьте их напрямую взаимодействовать с хранилищем Mobx, чтобы вы могли быстрее кодировать то, что вам нужно (вместо того, чтобы постоянно поддерживать все).

дополнение

Для компонентов категории 1 вы всегда можете обернуть их методом @inject(). Таким образом, например, вы можете превратить выпадающий компонент в компонент UserDropdown, который использует хранилище mobx для своего состояния. (Метод inject внедряет состояние mobx как реквизиты в компоненте). 

const UserDropDownComponent = mobx.inject(stores => ({users: stores.userStore.users}))(DropDownComponent);
// usage:
<UserDropDownComponent />

Внимание

Для чистых компонентов не всегда видны изменения состояния mobx. Чтобы исправить это, вам нужно обернуть компонент в аннотацию @observe. Или вы должны ввести реквизит, обернув его в: mobx.toJS(yourMobxStateProperty)

...