Currently there is a scenario: Deeply nested sub-components (display components) need to trigger actions (such as routing jumps), and you want to avoid passing related action creator or dispatcher methods layer by layer. So I want to do this:
Set the redux store instance as a global object, that is, global.store = store, and then store.dispatch() can be used anywhere and at any time.
It means that the mapDispatcherToProps method of react-redux is no longer used.
Are there any problems or pitfalls in doing this?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This obviously goes against the original intention of redux design. Any component can modify its state through the global store. It is recommended to place the action trigger in the root component. As for the deep components, the root component can be notified through events, and then the component triggers the action. Secondly, it is generally not recommended to have a component nesting level of more than 3 levels. You can consider whether it is really It is necessary to use the form of parent-child components and whether parts can be replaced by sibling components.
This approach works logically, but the main pitfall lies in server-side rendering.
If you do server-side rendering, the server needs its own store for rendering