lamo4ok
@lamo4ok
Программист

React + Redux: какие преимущества в раздельном подключении каждого контейнера через connect?

Есть приложение, в котором есть старый и новый код, писавшийся разными программистами. Я в данный момент принял работу после них и изучаю написанный ими код. Один программист предпочел "приконнектить" Dispatch и State глобально, в "верхнем" контейнере приложения:

// App/Containers/AppContainer.js
...
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);

export default AppContainer;

Другой же предпочел делать это локально в каждом субконтейнере приложения, которые он досоздавал, каждый раз перед контейнером вызывая примерно такой код:

// App/Containers/SubContainers/SomeSubContainer.jsx
...
@connect(
    state => ({
        app: {
            lang: state.page.blabla.language,
            ...
        },
        page: {
            meta: {
                tags: state.page.metaTags,
                ...
            },
        },
        banners: state.banners,
        ...
    }),
    dispatch => ({
        actions: bindActionCreators(actions, dispatch),
    }),
)

class SomeSubContainer extends Component {
...\

Как видно из последнего куска кода, данное решение сделать коннект локально в субконтейнере было продиктовано, возможно, банальной оптимизацией старого кода и получения значений state в нем - по сути берутся значения из глобального состояния приложения (которое у нас в первом куске кода приконнекчено) и переносятся в props (не знаю, как более верно это описать), меняются при этом только названия и иногда структура.

И, соответственно, все это решение возможно было временным, на момент переезда всего приложения на новую структуру state, props объектов и так далее. Но, возможно, есть какие-то еще преимущества в таком вот ручном коннекте субконтейнеров? Это был первый вопрос.

Второй вопрос заключается в следующем: почему после второго куска кода параметр app, к примеру, может попадать в props.app, а параметр banners в props.state.banners?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
первый вопрос:
при изменениях в store (глобальном state) у вас будут перерисовываться все компоненты, которые подписаны на эти изменения и в которых нет явного запрета на это через shouldComponentUpdate. То есть, если перерисуется родитель, то потом перерисуются и все его потомки. Класс? (сарказм, разумеется не класс). Поэтому подключение в "субконтейнерах", как вы говорите - продуктивнее: будут перерисовываться только те кусочки (родитель+дети), которые были подписаны на кусок (часть) данных из глобального store.

второй вопрос: так работает react-redux библиотека и частности функция connect, которая словно "приклеивает" ваши выборочные данные из store в props приконнекченного компонента. (используются возможности свойства рекакт компонентов - context ). Через react dev tools посмотрите, и увидите, что у вас автоматически, в результате работы функции connect, появляется родитель Conneceted(ComponentName) в котором оказываются нужные свойства (через контекст) и которые прокидываются вниз в ребенка (в уже написанный вручную вами компонент) пропсы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vshvydky
к каждому компоненту надо мапить только то , что ему нужно знать и использовать.
Мапить стор к апп особого смысла нет, это будет раздутый стейт реакта, не более. Тогда зачем так делать?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы