Каков наиболее эффективный подход в проекте React Redux, в котором используется агрессивная композиция? - PullRequest
Новая
       13

Каков наиболее эффективный подход в проекте React Redux, в котором используется агрессивная композиция?

1 голос
/ 25 сентября 2019

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

Например: 

<ComponentA>
  <ComponentB>
    <ComponentC>
      ...
           <ComponentZ>
           </ComponentZ>
    </ComponenetC>
  </ComponentB>
</ComponentA>

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

Какой будет наиболее эффективный подход для управления всеми функциями, которые изменяют состояние в приложении?

-Используйте компонент-контейнер, который соединяет компонент с действиями и передает все функции вниз вдерево компонентов

Пример: 

<ComponentA
  funcB={this.props.funcB}
  funcC={this.props.funcC}
  ...
  funcZ={this.props.funcZ}
>

-Каждый компонент имеет свой собственный контейнер, поэтому в дереве компонентов будет передано меньше функций, но каждому компоненту потребуется дополнительный компонент для подключения:

<ContainerA>
  <ContainerB>
    ...
      <ContainerZ />
  </Container>
</ContainerA>

1 Ответ

1 голос
/ 26 сентября 2019

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

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

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

...