How can i configure mobX in my new nextJs project?

Question

hi all i am new to nextjs and currently working on a project where i have to use mobX as a state management tool, i have configured it in a dummy project, to work around it, and in that i have passed a particular store (class) in a single component and used that in it only.

But now i have integrate it in my main project where i have to get that store (class) in various components, so how do i get it in every component, as if i try to import it everywhere i required it, it is creating a new instance of that class and because of that my stored data is got replaced by my initial state every time. What should i do, as i don't know the component hierarchy in next so i am not able to create the instance of store (class) only single time at the top level, just like we do in App.js in CRA.

I have tried using a wrapper on my root layout.js file in app folder to get the instance using a global variable.

this is my wrapper.js file.

import AuthStore from "./auth-store";
const MobxProvider = ({ children }) => {
const authData = new AuthStore();
      return <div>{children}</div>;
};
export default MobxProvider;

and this is my root (of app folder) layout.js file.

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <MobxProvider>
      <body className={inter.className}>{children}</body>
      </MobxProvider>
    </html>
  );
};
export default RootLayout;

but my child components is not getting the authData.

How can i configure mobX in my new nextJs project?

0 Answers0