chore: refactor react store

apps/react-demo/src/app.tsx

@@ -1,24 +1,21 @@
 import './style/global.less';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { RootStore } from './store/root.store';
 import { JetbrainsLogo } from '@apex/svg-project';
-import { RootContext } from './context';
 import { MobxThemeSwitch } from './component/mobx/MobxThemeSwitch';
-import { MobxThemeSwitch2 } from './component/mobx/MobxThemeSwitch2';
 import { Section } from './component/mobx/Section';
+import { RootContext } from './store/context';
 
 export function createReactApp(container: HTMLElement, node?: HTMLElement) {
-    const rootStore = new RootStore();
     const root = createRoot(container);
+    const rootValue = new Map<string, unknown>();
 
     root.render(
-        <RootContext.Provider value={rootStore}>
+        <RootContext.Provider value={rootValue}>
             <Section />
             <Section />
             <p style={{ width: 128 }} dangerouslySetInnerHTML={{ __html: JetbrainsLogo }} />
             <MobxThemeSwitch />
-            <MobxThemeSwitch2 />
         </RootContext.Provider>,
     );
 

apps/react-demo/src/component/mobx/MobxSubmit.tsx

@@ -1,14 +1,14 @@
-import { useStore } from '../../context';
 import { observer } from 'mobx-react-lite';
 import { Submit } from '../atom/Submit';
 import { useCallback } from 'react';
+import { useSubmitStore } from '../../store/app/submit.store';
 
 /**
  * @desc View with Store (Cannot reuse without same store)
  */
 export const MobxSubmit = observer(() => {
     // App store (Mobx)
-    const { submitStore } = useStore();
+    const submitStore = useSubmitStore();
     const onClick = useCallback(() => {
         submitStore.toggle();
         setTimeout(() => submitStore.toggle(), 3000);

apps/react-demo/src/component/mobx/MobxThemeSwitch.tsx

@@ -1,15 +1,17 @@
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import { themeStore } from '../../store/global/theme.store';
+import { useThemeStore } from '../../store/global/theme.store';
 
 export const MobxThemeSwitch = observer(() => {
+    const themeStore = useThemeStore();
+
     useEffect(() => {
         document.body.dataset.theme = themeStore.theme;
     }, [themeStore.theme]);
 
     return (
         <p>
-            <button onClick={() => themeStore.toggle()}>Switch Theme (Global Level: import global store)</button>
+            <button onClick={() => themeStore.toggle()}>Switch Theme (Global Level)</button>
         </p>
     );
 });

apps/react-demo/src/component/mobx/Section.tsx

@@ -11,7 +11,7 @@ export const Section = () => {
             {/* It's a memo component */}
             <Heading />
 
-            {/* It's a pure react component */}
+            {/* It's a pure React component */}
             {/* DON'T USE THIS in Mobx, it's only a demo */}
             {/* Wrap it with Mobx.observer if you want to use it in mobx environment */}
             <Counter />

apps/react-demo/src/store/app/submit.store.ts

@@ -1,17 +1,19 @@
 import { makeAutoObservable } from 'mobx';
-import { RootStore } from '../root.store';
+import { defineStore } from '../defineStore';
 
 /**
  * @desc App Store
  */
-export class SubmitStore {
+class SubmitStore {
     submitted = false;
 
-    constructor(readonly rootStore: RootStore) {
+    constructor() {
         makeAutoObservable(this);
     }
 
     toggle() {
         this.submitted = !this.submitted;
     }
 }
+
+export const useSubmitStore = defineStore('submit', SubmitStore);

apps/react-demo/src/store/app/ui.store.ts

@@ -1,11 +1,13 @@
-import { RootStore } from '../root.store';
 import { makeAutoObservable } from 'mobx';
+import { defineStore } from '../defineStore';
 
 /**
  * @desc App Store
  */
-export class UiStore {
-    constructor(readonly rootStore: RootStore) {
+class UiStore {
+    constructor() {
         makeAutoObservable(this);
     }
 }
+
+export const useUiStore = defineStore('ui', UiStore);

apps/react-demo/src/store/context.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const RootContext = createContext<Map<string, unknown> | null>(null);

apps/react-demo/src/store/defineStore.ts

@@ -0,0 +1,20 @@
+import { RootContext } from './context';
+import { useContext } from 'react';
+
+export function defineStore<T extends new (...args: unknown[]) => InstanceType<T>>(id: string, Ctor: T) {
+    return (injectedContext?: Map<string, unknown> | null): InstanceType<T> => {
+        const map = injectedContext || useContext(RootContext);
+
+        if (!map) {
+            throw new Error('[defineStore] must be used within a Provider');
+        }
+
+        if (map.has(id)) {
+            return map.get(id) as InstanceType<T>;
+        } else {
+            const instance = new Ctor();
+            map.set(id, instance);
+            return instance;
+        }
+    };
+}

apps/react-demo/src/store/global/theme.store.ts

@@ -1,4 +1,5 @@
 import { makeAutoObservable } from 'mobx';
+import { defineStore } from '../defineStore';
 
 /**
  * @desc Global Store (Singleton)
@@ -15,4 +16,9 @@ class ThemeStore {
     }
 }
 
-export const themeStore = new ThemeStore();
+/**
+ * Shared for Global Store
+ */
+const globalContextValue = new Map<string, unknown>();
+
+export const useThemeStore = () => defineStore('theme', ThemeStore)(globalContextValue);