refactor: remove zustand deps

Author: pyjun01

package.json

@@ -53,8 +53,7 @@
   "dependencies": {
     "@googlemaps/markerclusterer": "^2.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "zustand": "^4.4.5"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@mvlchain/eslint-config": "^1.0.3",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect } from 'react';
 
-import { LoadingStatus, coreStore, useApiLoadingStatus } from '../../store/core';
+import { LoadingStatus, setLoadingStatus, useApiLoadingStatus } from '../../store/core';
 import { ApiLoadConfig } from '../../types';
 import { appendLibImportScript } from '../../utils/appendScript';
 
@@ -22,16 +22,13 @@ export function GoogleMapApiLoader({ children, suspense, onSuccess, onFailure, .
     (promise = google.maps
       .importLibrary('core')
       .then((core) => {
-        coreStore.setState({
-          status: LoadingStatus.SUCCESS,
-          core: core as google.maps.CoreLibrary,
-        });
+        setLoadingStatus(LoadingStatus.SUCCESS);
 
         onSuccess?.(core as google.maps.CoreLibrary);
       })
       .catch((reason) => {
         console.error(reason);
-        coreStore.setState({ status: LoadingStatus.FAILURE });
+        setLoadingStatus(LoadingStatus.FAILURE);
 
         onFailure?.(reason);
       }));

src/components/GoogleMap/GoogleMapApiLoader.tsx

@@ -1,24 +1,51 @@
-import { create } from 'zustand';
+import { useEffect, useReducer } from 'react';
 
 export enum LoadingStatus {
   LOADING = 'LOADING',
   FAILURE = 'FAILURE',
   SUCCESS = 'SUCCESS',
 }
 
-export interface CoreStore {
+type Store = {
   status: LoadingStatus;
-  core: google.maps.CoreLibrary | null;
   setStatus: (status: LoadingStatus) => void;
-  setCore: (status: google.maps.CoreLibrary) => void;
-}
+};
 
-export const coreStore = create<CoreStore>((set, get) => ({
+const store: Store = {
   status: LoadingStatus.LOADING,
-  core: null,
-  setStatus: (status) => set({ status }),
-  setCore: (core) => set({ core }),
-}));
+  setStatus(status) {
+    this.status = status;
+    storeSub.notify();
+  },
+};
+
+const storeSub = {
+  listeners: new Set<(v: Store) => void>(),
+  sub(listener: (v: Store) => void) {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  },
+  notify() {
+    this.listeners.forEach((fn) => fn(store));
+  },
+};
+
+export const setLoadingStatus = store.setStatus.bind(store);
+
+export const useApiLoadingStatus = () => {
+  const loadingStatus = store.status;
+
+  const [_, rerender] = useReducer((_) => _ + 1, 0);
+  useEffect(
+    () =>
+      storeSub.sub(() => {
+        rerender();
+      }),
+    []
+  );
 
-export const useCoreStore = coreStore;
-export const useApiLoadingStatus = () => useCoreStore((state) => state.status);
+  return loadingStatus;
+};