Mobx,redux, these problems of dividing store

has found a lot of information, and it seems that the division of store is recommended for flattening. Up to two layers, such as

    {
       home:homeStore,
       about:aboutStore
    }

so what about the above structure for complex pages? Like home. There are heads, there are creations, there are many blocks of table,. If it"s all in the same store. What about teamwork? There is a conflict every time you get the code. The structure is not clear, and every time I want to add something, it is very inconvenient to transfer the files to store.

at present, we do it like this: but there will also be a problem, that is, it is not convenient for components to communicate with each other.

    {
       homeStore:{
         headerStore,
         tableStore:{
             searchStore,
             listStore
         },
         createStore
       },
       about:aboutStore
    }

can you give me some advice on which one is better? How to solve all kinds of pain points?

Javascript react.js mobx redux

Feb.28,2022

Public items should be withdrawn. For example, header footer tabBar belongs to pageConig and should not belong to a single page

I don't know the specific division of labor of your project, but the reducer in store can be split into multiple pieces, and then combined through combineReducers. Everyone only needs to write the corresponding components without conflict.

you can refer to the file structure division of this project .

Previous: How does nginx configure thinkphp access routing?

Next: Iview + vue-i18n Modal and DatePick components cannot be translated