Где надо подключать connect(mapStateToProps, mapDispatchToProps)(App) для каждого компонента?

Question

[AllenD13]

Всем привет.

Не до конца понятна структура Redux.

Скажем у меня есть приложение App и роутинг, который рендерит в зависимости от URL компоненты:

1. Component-1
   
2. Component-2
   

Надо ли определять mapStateToProps и mapDispatchToProps сразу в корневом компоненте App
connect(mapStateToProps, mapDispatchToProps)(App)

или можно для каждой компоненты внутри нее самой?

connect(mapStateToProps, mapDispatchToProps)(Compoment-1)
connect(mapStateToProps, mapDispatchToProps)(Compoment-2)

Answer 1

[vsuhachev]

connect нужен для того чтобы подписать компонент на события редуцера и дать доступ к данным редуцера. А роутинг он вообще в стороне от redux (хотя, конечно, есть роутеры, работающие через redux).

Я обычно придерживаюсь следующего: connect применяю к компонентам-контейнерам верхнего уровня, которыми управляет роутер(в вашем случае это Component-1, Component-2). Во все остальные простые (dumb) компоненты, находящиеся в контейнере, данные получают в параметрах (через props) от контейнера.

Если вложенные компоненты должны как-то взаимодействовать с redux: для этого в компоненте-контейнере определяются функции, которые видят редуцеры и dispatch. Дальше эти функции отдаются dumb-компонентам через props и они их могут вызвать по какому-то своему событию.

Теоретически вы можете делать connect к любому компоненту, но во первых это более накладно по ресурсам и во вторых это убивает инкапсуляцию. Прелесть т.н. "тупых" компонентов в том что они простые и зависят только от явных параметров (props) и следовательно легко переносимы. Добавляя к ним connect мы прибиваем их гвоздями к модели данных конкретного приложения.

Comments

[AllenD13]

Большое спасибо за ответ! Все очень понятно и доступно :)

Может вы сможете ответить и на другой вопрос (он у меня связан с этим).

Предположим я делаю коннект всех редьюсеров для App.

Как мне в данном случае правильно передать пропc в Component-1?
,

[AllenD13]

Нашел сам) Можно напрямую в route передавать и оттуда же доставать route.anyProp.