Using an MST store inside a component

[CharlesMarlow]

Hi, I'm setting up MST in my existing React project but can't seem to access the store(s) I've created in the components.

My root store:
`import { types } from "mobx-state-tree"
import { someStore } from './some-store';

export const RootStore = types.model("RootStore").props({
propertyRegistrationStore: types.optional(someStore, {}),
}).actions(self => ({

}));`

My useStores setup:
`import { createContext, useContext } from "react"
import { RootStore } from "./root-store"

const RootStoreContext = createContext(RootStore);

export const RootStoreProvider = RootStoreContext.Provider

export const useStores = () => useContext(RootStoreContext)`

In my entry point file I've imported the RootStoreProvider and wrapped my entire app tree within it.

In the component, I'm importing useStores, and trying to access it both with and without destructuring, for example:
const RootStore = useStores(); const { someStore } = RootStore;

Logging the store returns undefined but debugging hasn't led anywhere so far. I guess that one of the stages isn't set up properly, perhaps I'm missing something. This is my first attempt with MST. Any help?

[BATCOH]

You have to create an instance of your model to use it.
Like that:

import { types } from "mobx-state-tree"
import { someStore } from './some-store';

const RootStoreModel = types.model("RootStore").props({
propertyRegistrationStore: types.optional(someStore, {}),
}).actions(self => ({

}));`

export const RootStore = RootStoreModel.create({});

Also, you should wrap your react components with observer to re-render them on changes (see https://mobx.js.org/react-integration.html)

[CharlesMarlow]

Still having issues with this. I can see my store in the component but only the values and not the actions, so for example I can see the "someString" value but don't have access to perform the "setSomeString" action which I've written in the store.

Again, I suspect some of the wiring is off, but debugging hasn't helped so far.

Has anyone else stumbled upon this issue?

[BATCOH]

Can you do a minimal example on codesandbox.io? It's hard to tell what might be wrong without seeing the code.

[YuanRuQian]

I‘ve tried to make a demo according to your description ( not sure if this is what you meant )
It seems like I can still use the action ?
Could you provide a minimal reproduction on platforms like codesandbox or codepen ?

Demo: https://codesandbox.io/s/1744-mnr0x?file=/index.js