OkulUp Zustand Store Pattern

Proje: OkulUp · Hub: OkulUp — Conventions

Zustand Store Pattern

Temel Pattern

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
type Store = State & Actions;
 
export const useMyStore = create<Store>()(
  persist(
    (set, get) => ({
      // initial state
      // actions
    }),
    {
      name: 'my-storage',  // AsyncStorage key
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({ /* sadece persist edilecek alanlar */ }),
    },
  ),
);

Persist Dikkat Noktaları

partialize — her state alanını persist etme. Computed/runtime değerleri hariç tut.

Örnek: themeSlice’ta mode persist edilir, isDark edilmez (runtime’da hesaplanır). Örnek: authSlice’ta hasHydrated persist edilmez.

Hook Dışı Erişim

// Servis katmanında (hook context yok)
const { token } = useAuthStore.getState();
useAuthStore.getState().logout();

Store Barrel Export

src/store/index.ts’ten export ediliyor:

export { useAuthStore } from './slices/authSlice';
export { useThemeStore } from './slices/themeSlice';
export { useNotificationStore } from './slices/notificationSlice';
export { useToastStore } from './slices/toastSlice';

Mevcut Store’lar

• authSlice — user, token, permissions, isAuthenticated
• themeSlice — light/dark/system mode
• notificationSlice — unread badge sayıları
• toastSlice — global toast sistemi
• consentSlice — KVKK onay durumu
• dashboardPrefsSlice — dashboard kart tercihleri
• archivedChatsSlice — arşivlenmiş konuşmalar

Related

• state-management — store detayları
• react-query-hooks-pattern — server state için React Query