Mobx: I am merge store files into global store, is it right way?

[kmvan]

My situation: I have many modules, they have their store, and they can mutual access.
If I write a store file, the file lines too much. So I scatter them into small store files, and put them into the global store file by import.

Demo code:

//////////////////////// global store file: store.jsx
import { observable } from 'mobx'
import appStoreInput from './app-store-input'
import appStoreItems from './app-store-items'
class Store {
    constructor() {
        this.storeInput= new appStoreInput(this)
        this.storeItem = new appStoreItems(this)
    }
}
export default Store

```javascript
//////////////////////// small store file: app-store-input.jsx
class appStoreInput {
constructor(store) {
store.items = []
this.store = store
}
addItem = () => {
this.store.items.push(+new Date())
}
}
export default appStoreInput

```javascript
//////////////////////// small store file: app-store-items.jsx
class appStoreItems {
    constructor(store) {
        this.store = store
    }
    @computed get getCount = () => {
        return this.store.items.length
    }
}
export default appStoreItems 

Is it a good idea?

[urugator]

This is not a Mobx related question.
There is a lot of approaches to handle dependencies, each has it's pros and cons.
Your global Store is basically a service locator.
Since all of your stores has an access to one another, it's hard to track what depends on what and it's easy to introduce a circular dependency.