Use MobX @inject with Context API in functional components

Question

How can I implement @inject and observer in functional child components without explicitly importing the store with context and destructuring it. Repo and Deployed site below

https://laughing-mayer-7a7c36.netlify.app/

https://github.com/hildakh/testmobx

Answer 1

You can make hook like that, so you won't need to import context every time, just this hook:

export const useStore = () => {
  const store = React.useContext(storeContext)
  if (!store) {
    // this is especially useful in TypeScript so you don't need to be checking for null all the time
    throw new Error('useStore must be used within a StoreProvider.')
  }
  return store
}

And you can still use inject decorator with functional components if you prefer that way, it still works and it's totally fine way