A pattern for sharing state between two stores

[davetapley]

I have:

export const SensorStore = model({
  selected: maybe(reference(Sensor)),

And I needed to know if selected !== undefined in another MenuStore:

export const MenuStore = types
  .model({ sensorSelected: false })
  .actions((self) => ({
    setSensorSelected(x: boolean) { self.sensorSelected = x; }

[davetapley]

I'm not saying you should do this, but here's a pattern I came up with:
(I'm using mobx-store-provider but would work without)

First pass SensorStore instance in to other store's env:

const sensorStore = useCreateStore(SensorStore)
const menuStore = useCreateStore(Menus, {}, { sensorStore });

Pick it up in menuStore with afterCreate:

interface ISensorStore extends Instance<typeof SensorStore> {}
interface IEnv { sensorStore: ISensorStore }

// menuStore
 .actions((self) => ({
    afterCreate() {
      const env = getEnv<IEnv>(self);

Then use reaction to catch changes and update sensorSelected 💫

      reaction(
        () => env.sensorStore.selected,
        (selected) => self.setSensorSelected(selected !== undefined)
      );
    },

Thoughts?

[EmilTholin]

Hi @davetapley!

Another approach to this problem could be to go by the common root of your stores and return rootStore.sensorStore.selected !== undefined as a view. This way you don't have to manually update this value.

Example (CodeSandbox)

const MenuStore = t.model("MenuStore").views((self) => ({
  get sensorSelected() {
    return getRoot<any>(self).sensorStore.selected !== undefined;
  }
}));

[davetapley]

That's much better!
I'd seen the RootStore example from in the readme, but I didn't know about getRoot until right now. Now I understand the value of having a single RootStore!

The <any> is a shame, presumably it should be <typeof RootStore>, but as shown in your sandbox the problem is that we have to define RootStore after MenuStore?
Is there anyway around that, e.g. by adding the .view on after defining RootStore?
(I tried it but it doesn't work 🤔 )

[EmilTholin]

Great!

I think you should be able to create an interface and use that before the definition. I think TS just complains if RootStore is used inline before its definition.

const MenuStore = t.model("MenuStore").views((self) => ({
  get sensorSelected() {
    return getRoot<RootStoreI>(self).sensorStore.selected !== undefined;
  }
}));

const RootStore = t.model("RootStore", {
  sensorStore: SensorStore,
  menuStore: MenuStore
});

interface RootStoreI extends Instance<typeof RootStore> {}

[araphiel]

It seems like this only works if the sub-model is defined with the parent model file.

[constgen]

Define dependency store as a volatile

import authStore from 'stores/auth.store.js'

let HttpModel = types.model({})
  .volatile(() => ({
    authStore
  }))
  .views((self) => ({
    get authorized() {
      return self.authStore.authorized
    }
  }));

Is this what you need?