Document MobXProviderContext

[multimeric]

The last time I used this library, I was using the Provider/inject pattern. However the README now says "but consider to use React.createContext instead", and later "It is possible to read the stores provided by Provider using React.useContext, by using the MobXProviderContext context that can be imported from mobx-react."

However the README documentation doesn't actually give an example of how to do this, nor does it even document the MobXProviderContext. A google search doesn't really tell me anything either, and I'm not particularly clear on the difference between MobXProviderContext and React.useContext (why is there a library specific provider?). I'm currently very confused how I'm supposed to consume a mobx store.

Could we add a simple example, and also a method documentation for MobXProviderContext?

[danielkcz]

Please have a look here if it answers your questions...

https://mobx-react.js.org/recipes-context

And also this if you are migrating from inject pattern

https://mobx-react.js.org/recipes-migration

If you have further questions after reading that, please ask so I can improve docs.

[JoeDevine]

@FredyC this is really useful, but I'm also having a similar issue as @TMiguelT as well and want to make sure I'm following best practice, but really can't see how MobXProviderContext fits into it all? or how it's used?

I'm currently using React.createContext and using the <Observer /> on the consumer from mobx-react which works, but really keen to understand how to avoid this on the consumer?

My current set up is... (massively simplified just to demonstrate):

import { types } from "mobx-state-tree";

const ExampleContext = React.createContext("default");

const exampleStore = types.model({ prop: types.optional(types.string, "") }).create();

const ChildComponent = () => (
  <ExampleContext.Consumer>
    {example => <Observer>{() => <div>{example.prop}</div>}</Observer>}
  </ExampleContext.Consumer>
);

const ParentComponent = () => (
<ExampleContext.Provider value={exampleStore}>
   <ChildComponent />
</ExampleContext.Provider>
);

I'm interested in how to avoid the nesting on the child? How should I be constructing the child component? This example setup I'm actually trying to use on a form so this data is constantly being updated, so it's important that the child is updating when the values within the store are updated.

Hope that makes sense!

[danielkcz]

@JoeDevine The MobXProviderContext is only useful for code using inject and migrating to hooks. That way you can mix both in a single app and share the same context. If you have your own Context, you can forget about the one exported from the package :)

Also, have a look at React.useContext hook if you want to minimize nesting. No other way than using hooks to do that.

[danielkcz]

By coincidence, I've been reworking migration guide today and it's published now. Hopefully, it will answer some more questions.

https://mobx-react.js.org/recipes-migration

[JoeDevine]

@FredyC Thanks for the quick reply!

Ah I didn't realise that! Annoyingly I'm set up with SSR so I've not been able to implement hooks on the app yet - would you say the above is the best approach then in that case?

That update to the migration guide is incredibly useful as well - thank you for that! that makes much more sense of MobXProviderContext

[danielkcz]

Well, HOC might be probably slightly better in the matter of nesting (recompose 👋). Alternatively, there are libraries like https://github.com/pedronauck/react-adopt, but never tried it in practice.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.