Прокидывать пропс или создать много контейнеров?

Question

[qfrontend]

Приветствую)
Допустим есть компонент App который содержит другие компоненты (Catalog, Baner, AboutUs ...). А те компоненты содержат другие под компоненты, а те ещё какие нибудь..... уровень вложенности может быть очень большим...
Как лучше сделать?
Каждому умному компоненту (Catalog, Baner, AboutUs ...) создавать контейнер, и коннектить его с Store. Получается что может быть очень много котейнров...
Или прокидывать пропсы из App через кучу уровней к нужному компоненту ? Тогда получается что у App огромное количество пропсов...
Как вообще будет правильней.... Как делаете вы?

Comments

[Роман Александрович]

Каждому умному компоненту (Catalog, Baner, AboutUs ...) создавать контейнер будет правильнее и удобнее.

Answer 1

[dev null]

Большая вложенность это плохо, используйте композицию компонентов.
Неплохая статья на тему организации приложения

Answer 2

[polarlord]

Смотрите, прокидывать через все приложение кучу props - это очень неправильно. Если будет меняться какой-либо пропс то он вызовет обновление всех компонентов через которые он явно передается, даже если он там не используется. Если уж очень хочется использовать такой путь - то уж лучше использовать React Context.
По поводу создания контейнеров - тут вопрос стиля. Я довольно часто встречаю в проектах такое разделение:
components - все stateless компоненты и также компоненты где нужен только стейт из redux, тут просто сам компонент заворачивается в connect()
containers - компоненты где нужны и стейт и экшены, тут нужно помнить основные свойства (из знаменитой статьи) контейнеров, т.е. никакой верстки, возможно использовать только другие компоненты и т.д.
Хотя правильнее всего разбивать приложение на небольшие и универсальные компоненты, как написали выше. Это конечно не так просто в начале, по сравнению с убер-компонентами, но зато потом это все окупится с лихвой.