feat: fundamental zustand integration

Author: WrathChaos

.babelrc

@@ -19,7 +19,8 @@
           { "@utils": "./src/utils/" },
           { "@assets": "./src/assets/" },
           { "@event-emitter": "./src/services/event-emitter" },
-          { "@local-storage": "./src/services/local-storage" }
+          { "@local-storage": "./src/services/local-storage" },
+          { "@zustand": "./src/services/zustand/store" }
         ],
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }

index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.json";

package-lock.json

@@ -19,12 +19,14 @@
     "react-native-dynamic-vector-icons": "^1.2.0",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-localization": "^2.3.1",
+    "react-native-mmkv-storage": "^0.8.0",
     "react-native-reanimated": "^2.9.1",
     "react-native-safe-area-context": "^4.3.1",
     "react-native-screens": "^3.15.0",
     "react-native-splash-screen": "^3.3.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-navigation-helpers": "^2.1.0"
+    "react-navigation-helpers": "^2.1.0",
+    "zustand": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",

package.json

@@ -1,7 +1,4 @@
-export interface ICardItem {
+export interface IUser {
   name: string;
-  description: string;
-  language: string;
-  star: number;
-  fork: number;
+  email: string;
 }

src/services/models/index.ts

@@ -0,0 +1,17 @@
+import { StoreSlice } from "@zustand";
+
+export interface AppSlice {
+  isWalkthroughAvailable: boolean;
+  setWalkthrough: (value: boolean) => void;
+  isDarkMode: boolean;
+  setDarkMode: (value: boolean) => void;
+}
+
+const createAppSlice: StoreSlice<AppSlice> = (set) => ({
+  isWalkthroughAvailable: true,
+  setWalkthrough: (value: boolean) => set({ isWalkthroughAvailable: value }),
+  isDarkMode: true,
+  setDarkMode: (value: boolean) => set({ isDarkMode: value }),
+});
+
+export default createAppSlice;

src/services/zustand/app/AppSlice.ts

@@ -0,0 +1,67 @@
+import {
+  createContext as reactCreateContext,
+  createElement,
+  useContext,
+  useRef,
+  type ReactNode,
+} from "react";
+import type { UseBoundStore, StoreApi } from "zustand";
+
+type UseContextStore<T extends object> = {
+  (): T;
+  <U>(selector: (s: T) => U, equalityFn?: (a: T, b: T) => boolean): U;
+};
+
+function createContext<
+  TState extends object,
+  TUseBoundStore extends UseBoundStore<StoreApi<object>> = UseBoundStore<
+    StoreApi<object>
+  >,
+>() {
+  const ZustandContext = reactCreateContext<TUseBoundStore | undefined>(
+    undefined,
+  );
+
+  const Provider = ({
+    createStore,
+    children,
+  }: {
+    createStore: () => TUseBoundStore;
+    children: ReactNode;
+  }) => {
+    const storeRef = useRef<TUseBoundStore>();
+
+    if (!storeRef.current) {
+      storeRef.current = createStore();
+    }
+
+    return createElement(
+      ZustandContext.Provider,
+      { value: storeRef.current },
+      children,
+    );
+  };
+
+  const useStore: UseContextStore<TState> = <StateSlice>(
+    selector?: (s: TState) => StateSlice,
+    equalityFn = Object.is,
+  ) => {
+    // ZustandContext value is guaranteed to be stable.
+    const useProviderStore = useContext(ZustandContext);
+    if (!useProviderStore) {
+      throw new Error(
+        "Seems like you have not used zustand provider as an ancestor.",
+      );
+    }
+
+    return useProviderStore(selector as (s: object) => StateSlice, equalityFn);
+  };
+
+  return {
+    Provider,
+    ZustandContext,
+    useStore,
+  };
+}
+
+export default createContext;

src/services/zustand/context.ts

@@ -0,0 +1,30 @@
+import create, { StoreApi } from "zustand";
+import { persist, StateStorage } from "zustand/middleware";
+import { MMKVLoader } from "react-native-mmkv-storage";
+import createAppSlice, { AppSlice } from "@services/zustand/app/AppSlice";
+import createUserSlice, { UserSlice } from "@services/zustand/user/UserSlice";
+
+const sessionStorage = new MMKVLoader()
+  .withInstanceID("sessionStorage")
+  .initialize();
+
+export type StoreState = AppSlice & UserSlice;
+export type StoreSlice<T> = (
+  set: StoreApi<StoreState>["setState"],
+  get: StoreApi<StoreState>["getState"],
+) => T;
+
+const useStore = create<StoreState>()(
+  persist(
+    (set, get) => ({
+      ...createAppSlice(set, get),
+      ...createUserSlice(set, get),
+    }),
+    {
+      name: "store",
+      getStorage: () => sessionStorage as StateStorage,
+    },
+  ),
+);
+
+export default useStore;

src/services/zustand/store.ts

@@ -0,0 +1,16 @@
+import { StoreSlice } from "@zustand";
+import { IUser } from "@services/models";
+
+export interface UserSlice {
+  userData: IUser | null;
+  setUserData: (user: IUser) => void;
+  resetUserData: () => void;
+}
+
+const createUserSlice: StoreSlice<UserSlice> = (set) => ({
+  userData: null,
+  setUserData: (user: IUser) => set({ userData: user }),
+  resetUserData: () => set({ userData: null }),
+});
+
+export default createUserSlice;

src/services/zustand/user/UserSlice.ts

@@ -39,7 +39,8 @@
       "@screens/*": ["./screens/*"],
       "@utils": ["./utils/"],
       "@assets": ["./assets/"],
-      "@local-storage": ["./services/local-storage"]
+      "@local-storage": ["./services/local-storage"],
+      "@zustand": ["./services/zustand/store"]
     }
   },
   "exclude": [