Есть приложение, в котором есть старый и новый код, писавшийся разными программистами. Я в данный момент принял работу после них и изучаю написанный ими код. Один программист предпочел "приконнектить" 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?
Средний