There is an app in which there are old and new code written by different programmers. I currently accepted a job after and they study their code. One programmer chose "reconnecting" Dispatch and State globally in the "top" app container:
// App/Containers/AppContainer.js
...
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);
export default AppContainer;
Other prefer to do it locally in each container application, which he docosanol, each time before the container causing the code like this:
// 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),
}),
)
SomeSubContainer class extends Component {
...\
As you can see from the last piece of code, the solution is to make the connection locally in the container is dictated, perhaps, a trivial optimization of old code and get values in this state - in fact, only the values from the application's global state (which we have in the first piece of code preconnecting) and transferred to the props (don't know how more correctly to describe it), changing only the names and sometimes the structure.
And, consequently, this decision may be a temporary one, at the time of moving the entire application to the new structure of the state, props and so on. But maybe there are some other benefits in this manual connect subcontainers?
It was the first question.The second question is: why after the second piece of code setting app, for example, can get into the props.app and setting banners in props.state.banners?