Как взаимодействовать между магазинами Mobx, созданными с помощью React.createContext

У меня есть файл useStores.ts, в котором два хранилища Mobx инициализированы следующим образом.

import StoreA from "./stores/StoreA";
import StoreB from "./stores/StoreB";

const storesContext = createContext({
       storeA: new StoreA(),
       storeB: new StoreB(),
});

export const useStores = () => useContext(storesContext);

Поэтому я могу использовать эти хранилища внутри любых компонентов следующим образом.

const { storeA } = useStores();

Но я не уверен, как получить доступ к storeA внутри storeB.

Может ли кто-нибудь помочь мне с тем же?


reactjs react-hooks mobx react-context mobx-react
person Novice_Developer    schedule 03.06.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны создать root хранилище, которое содержит все другие хранилища, и оно передается дочерним хранилищам, чтобы они могли «подняться» в хранилище root, а затем в любое другое хранилище.

class RootStore {
  storeA = new StoreA(this)
  storeB = new StoreB(this)
}


class StoreA{
  constructor(rootStore){
    this.rootStore = rootStore
    // get to store B 
    // this.rootStore.storeB
  }
}

Использовать с createContext

const storesContext = createContext(new RootStore());

Или, что еще лучше, следуйте принципам внедрения зависимостей и передайте child store в root store в конструкторе RootStore .

class RootStore {
  constructor(a,b){
    this.storeA = a
    this.storeB = b

    this.storeA.setRoot(this)
    this.storeB.setRoot(this)
}

const storesContext = createContext(new RootStore(new StoreA(),new StoreB());
person Ivan V.    schedule 03.06.2020
comment
Подскажите, пожалуйста, как добиться того же с помощью createContext. - person Novice_Developer; 03.06.2020