React mobx Store 分拆

一个较大的项目如果所有内容都写在一个store里，就显得太多。将一个store拆散，分为一个主store和多个副store。副store可以用到主store的数据。主store有副store的引用便于提供React.createContext。和保持只有一个Provider包裹在主UI组件中

创建主Store

// store.ts
import PageEffectStore from '../Home/stores/PageEffectStore'
import HybridStore from './stores/HybridStore'

class Store {
  /** 副store1 */
  pageEffectStore: PageEffectStore
  /** 副store2 */
  hybridStore: HybridStore
  pageData = ''
  constructor() {
    this.hybridStore = new HybridStore({ mainStore: this })
    this.pageEffectStore = new PageEffectStore({ mainStore: this })
    makeAutoObservable(this)
  }
}

创建副Store

// hybridStore
interface HybridStoreConstructor {
  mainStore: MainStore
}

class HybridStore {
  mainStore: MainStore
  constructor({ mainStore }: HybridStoreConstructor) {
    this.mainStore = mainStore
    makeAutoObservable(this)
  }
}