如何组织相对大量的mobx商店

时间:2017-06-12 12:16:24

标签: reactjs mobx mobx-react

目前,我有一个mobx结构:

  • 页面商店。每个应用程序路径的存储(处理表单,路由onEnter和onLeave)。
  • 域名商店。商店到 操纵和保存服务器中的数据(与服务器同步,解析,使数据模型保持数组)。
  • 数据模型。用于保存和描述特定数据实例的模型(存储)。

现在我的init商店js看起来像:

const initStores = (apolloClient) => {
  const appStore = new AppStore(apolloClient),
        // Data Stores
        uploadStore = new UploadStore(appStore),
        collectionGroupsStore = new CollectionGroupsStore(appStore),
        collectionsStore = new CollectionsStore({appStore, uploadStore, collectionGroupsStore}),
        imagesStore = new ImagesStore({appStore}),


        // Pages
        indexPageStore = new IndexPageStore({appStore, uploadStore, collectionsStore, collectionGroupsStore}),
        collectionPageStore = new CollectionPageStore(appStore, uploadStore),
        loginStore = new LoginStore(appStore),
        publicUserStore = new PublicUserStore(appStore),
        userSettingsStore = new UserSettingsStore(appStore);

  collectionGroupsStore.injectStores({collectionsStore})

  return {
    appStore,
    uploadStore,
    collectionsStore,
    collectionGroupsStore,
    indexPageStore,
    collectionPageStore,
    loginStore,
    publicUserStore,
    userSettingsStore,
  }

}

const stores = initStores(apolloClient)

export default stores;

问题是域存储(collectionGroupsStore,collectionsStore,imagesStore)需要相互链接并在它们之间共享数据。似乎我有更多的域名存储,我会写更多的样板文件。我错过了什么吗?有没有更好的方法来组织商店并让他们互相交谈?

编辑:我认为我对初始配置进行了优化:

const initStores = (apolloClient) => {
  // Data Stores
  const dataStores = {
    appStore: new AppStore(apolloClient),
    uploadStore: new UploadStore(),
    collectionGroupsStore: new CollectionGroupsStore(),
    collectionsStore: new CollectionsStore(),
  }

  for (let prop in dataStores) {
    if (dataStores[prop].injectStores) dataStores[prop].injectStores({...dataStores})
  }

  // Pages
  const pageStores = {
    indexPageStore: new IndexPageStore({...dataStores}),
    collectionPageStore: new CollectionPageStore({...dataStores}),
    loginStore: new LoginStore({...dataStores}),
    publicUserStore: new PublicUserStore({...dataStores}),
    userSettingsStore: new UserSettingsStore({...dataStores}),
  }

  return {
    ...dataStores,
    ...pageStores
  }
}

0 个答案:

没有答案