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?
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
  • maxfarseer
    @maxfarseer
    Опрос: https://goo.gl/forms/qMdt64HRyGiGIjFQ2
    первый вопрос:
    при изменениях в store (глобальном state) у вас будут перерисовываться все компоненты, которые подписаны на эти изменения и в которых нет явного запрета на это через shouldComponentUpdate. То есть, если перерисуется родитель, то потом перерисуются и все его потомки. Класс? (сарказм, разумеется не класс). Поэтому подключение в "субконтейнерах", как вы говорите - продуктивнее: будут перерисовываться только те кусочки (родитель+дети), которые были подписаны на кусок (часть) данных из глобального store.

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

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

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