Hook to access root store

[nigellima]

I was checking a way that I can access the root store from the components without the need to pass it down the props. I found this article here and it explains how to create a hook useStore. So, my root store file now looks like this:

  import { createContext, useContext } from 'react';
  
  import { castToSnapshot, Instance, types } from 'mobx-state-tree';
  
  import { gaugesStore, GaugesStore } from './GaugesStore';
  import { continentsStore, ContinentsStore } from './ContinentStore';
  import { dateFilterStore, DateFilterStore } from './DateFilterStore';
  
  export const rootStore = types
    .model({
      dateFilterStore: DateFilterStore,
      gaugesStore: GaugesStore,
      continentsStore: ContinentsStore,
    })
    .create({
      dateFilterStore: castToSnapshot(dateFilterStore),
      gaugesStore: castToSnapshot(gaugesStore),
      continentsStore: castToSnapshot(continentsStore),
    });
  
  type IRootStore = Instance<typeof rootStore>;
  
  export const rootStoresContext = createContext(rootStore);
  export const StoreProvider = rootStoresContext.Provider;
  
  export const useStore = (): IRootStore  => {
    const store = useContext(rootStoresContext);
    if (store === null) {
      throw new Error('Store cannot be null, please add a context provider');
    }
    return store;
  };

In the article it also states that I need to wrap my App with the provider. But I didnt get why this is necessary as it seems to be working fine without the need to use the StoreProvider with the rootStore as value:

import { StoreProvider, rootStore } from './stores/rootStore';

export default function App(){
  return (
    <StoreProvider value={rootStore}>
      { /** rest of your app here */ }
    </StoreProvider>
  );
}

Also, I realized that with this approach the fix for the issue that is stated in this tutorial does not work. When I make any definition changes it throws an error saying the I can not use the useStore before initialization.

Thanks in advance

[EmilTholin]

Hi @nigellima!

The first argument given to createContext will be what is returned from useContext if there is no Provider above the component in the tree. You could therefor opt for not using a provider at all and give a RootStore instance directly to createContext, as you have done in your code.

Another approach is to just export the RootStore and create an instance of if outside of the module and give it to the provider. This can help a lot if you also need to create separate instances for e.g. testing.

// stores/RootStore.ts
// ...
export const RootStore = types
  .model({
    dateFilterStore: DateFilterStore,
    gaugesStore: GaugesStore,
    continentsStore: ContinentsStore,
  });

type IRootStore = Instance<typeof RootStore>;

export const rootStoresContext = createContext(null as IRootStore);
export const StoreProvider = rootStoresContext.Provider;

export const useStore = (): IRootStore  => {
  const store = useContext(rootStoresContext);
  if (store === null) {
    throw new Error('Store cannot be null, please add a context provider');
  }
  return store;
};

// index.ts
import React from 'react';
import ReactDOM from 'react-dom';
import { RootStore, StoreProvider } from './stores/RootStore';
import App from './components/App';

const rootStore = RootStore.create({
  // ...
});

ReactDOM.render(
  <StoreProvider value={rootStore}>
    <App />
  </StoreProvider>,
  document.getElementById('root')
);

I'm not sure how to fix the HMR issue. I tend to not use it when using MST myself.

[nigellima]

Thank you very much for your reply @EmilTholin
It's nice to see this approach is used in Ingnite.