root store hook example

example.tsx

// in RootStore.ts
export class RootStore {
  userStore = new UserStore()
  chatStore = new ChatStore()
  appNavigationStore = new AppNavigationStore()
}

export const RootStoreContext = React.createContext<RootStore>()

export function useRootStore() {
  const store = React.useContext(RootStoreContext)
  if (!store) {
    throw new Error(
      "useRootStore() can only be used inside the RootStoreContext provider",
    )
  }
  return store
}

// in index
ReactDOM.render(
  <RootStoreContext.Provider value={new RootStore()}>
    <App />
  </RootStoreContext.Provider>,
  document.getElementById("root"),
)

// in components
function UserProfile({ userId }: { userId: string }) {
  const { userStore } = useRootStore()
  const user = userStore.getUser(userId)
  return (
    <main>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </main>
  )
}