1// store/useStore.ts
 2import { create } from 'zustand'
 3import { devtools, persist } from 'zustand/middleware'
 4
 5interface AppState {
 6  user: User | null
 7  theme: 'light' | 'dark'
 8  setUser: (user: User | null) => void
 9  toggleTheme: () => void
10}
11
12export const useStore = create<AppState>()(
13  devtools(
14    persist(
15      (set) => ({
16        user: null,
17        theme: 'light',
18        setUser: (user) => set({ user }),
19        toggleTheme: () => set((state) => ({
20          theme: state.theme === 'light' ? 'dark' : 'light'
21        })),
22      }),
23      { name: 'app-storage' }
24    )
25  )
26)
27
28// Usage in component
29function Header() {
30  const { user, theme, toggleTheme } = useStore()
31  return (
32    <header className={theme}>
33      {user?.name}
34      <button onClick={toggleTheme}>Toggle Theme</button>
35    </header>
36  )
37}

 1// store/index.ts
 2import { configureStore } from "@reduxjs/toolkit";
 3import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 4import userReducer from "./slices/userSlice";
 5import cartReducer from "./slices/cartSlice";
 6
 7export const store = configureStore({
 8  reducer: {
 9    user: userReducer,
10    cart: cartReducer,
11  },
12  middleware: (getDefaultMiddleware) =>
13    getDefaultMiddleware({
14      serializableCheck: {
15        ignoredActions: ["persist/PERSIST"],
16      },
17    }),
18});
19
20export type RootState = ReturnType<typeof store.getState>;
21export type AppDispatch = typeof store.dispatch;
22
23// Typed hooks
24export const useAppDispatch: () => AppDispatch = useDispatch;
25export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

 1// store/slices/userSlice.ts
 2import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
 3
 4interface User {
 5  id: string;
 6  email: string;
 7  name: string;
 8}
 9
10interface UserState {
11  current: User | null;
12  status: "idle" | "loading" | "succeeded" | "failed";
13  error: string | null;
14}
15
16const initialState: UserState = {
17  current: null,
18  status: "idle",
19  error: null,
20};
21
22export const fetchUser = createAsyncThunk(
23  "user/fetchUser",
24  async (userId: string, { rejectWithValue }) => {
25    try {
26      const response = await fetch(`/api/users/${userId}`);
27      if (!response.ok) throw new Error("Failed to fetch user");
28      return await response.json();
29    } catch (error) {
30      return rejectWithValue((error as Error).message);
31    }
32  },
33);
34
35const userSlice = createSlice({
36  name: "user",
37  initialState,
38  reducers: {
39    setUser: (state, action: PayloadAction<User>) => {
40      state.current = action.payload;
41      state.status = "succeeded";
42    },
43    clearUser: (state) => {
44      state.current = null;
45      state.status = "idle";
46    },
47  },
48  extraReducers: (builder) => {
49    builder
50      .addCase(fetchUser.pending, (state) => {
51        state.status = "loading";
52        state.error = null;
53      })
54      .addCase(fetchUser.fulfilled, (state, action) => {
55        state.status = "succeeded";
56        state.current = action.payload;
57      })
58      .addCase(fetchUser.rejected, (state, action) => {
59        state.status = "failed";
60        state.error = action.payload as string;
61      });
62  },
63});
64
65export const { setUser, clearUser } = userSlice.actions;
66export default userSlice.reducer;

 1// store/slices/createUserSlice.ts
 2import { StateCreator } from "zustand";
 3
 4export interface UserSlice {
 5  user: User | null;
 6  isAuthenticated: boolean;
 7  login: (credentials: Credentials) => Promise<void>;
 8  logout: () => void;
 9}
10
11export const createUserSlice: StateCreator<
12  UserSlice & CartSlice, // Combined store type
13  [],
14  [],
15  UserSlice
16> = (set, get) => ({
17  user: null,
18  isAuthenticated: false,
19  login: async (credentials) => {
20    const user = await authApi.login(credentials);
21    set({ user, isAuthenticated: true });
22  },
23  logout: () => {
24    set({ user: null, isAuthenticated: false });
25    // Can access other slices
26    // get().clearCart()
27  },
28});
29
30// store/index.ts
31import { create } from "zustand";
32import { createUserSlice, UserSlice } from "./slices/createUserSlice";
33import { createCartSlice, CartSlice } from "./slices/createCartSlice";
34
35type StoreState = UserSlice & CartSlice;
36
37export const useStore = create<StoreState>()((...args) => ({
38  ...createUserSlice(...args),
39  ...createCartSlice(...args),
40}));
41
42// Selective subscriptions (prevents unnecessary re-renders)
43export const useUser = () => useStore((state) => state.user);
44export const useCart = () => useStore((state) => state.cart);

 1// atoms/userAtoms.ts
 2import { atom } from 'jotai'
 3import { atomWithStorage } from 'jotai/utils'
 4
 5// Basic atom
 6export const userAtom = atom<User | null>(null)
 7
 8// Derived atom (computed)
 9export const isAuthenticatedAtom = atom((get) => get(userAtom) !== null)
10
11// Atom with localStorage persistence
12export const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light')
13
14// Async atom
15export const userProfileAtom = atom(async (get) => {
16  const user = get(userAtom)
17  if (!user) return null
18  const response = await fetch(`/api/users/${user.id}/profile`)
19  return response.json()
20})
21
22// Write-only atom (action)
23export const logoutAtom = atom(null, (get, set) => {
24  set(userAtom, null)
25  set(cartAtom, [])
26  localStorage.removeItem('token')
27})
28
29// Usage
30function Profile() {
31  const [user] = useAtom(userAtom)
32  const [, logout] = useAtom(logoutAtom)
33  const [profile] = useAtom(userProfileAtom) // Suspense-enabled
34
35  return (
36    <Suspense fallback={<Skeleton />}>
37      <ProfileContent profile={profile} onLogout={logout} />
38    </Suspense>
39  )
40}

 1// hooks/useUsers.ts
 2import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 3
 4// Query keys factory
 5export const userKeys = {
 6  all: ["users"] as const,
 7  lists: () => [...userKeys.all, "list"] as const,
 8  list: (filters: UserFilters) => [...userKeys.lists(), filters] as const,
 9  details: () => [...userKeys.all, "detail"] as const,
10  detail: (id: string) => [...userKeys.details(), id] as const,
11};
12
13// Fetch hook
14export function useUsers(filters: UserFilters) {
15  return useQuery({
16    queryKey: userKeys.list(filters),
17    queryFn: () => fetchUsers(filters),
18    staleTime: 5 * 60 * 1000, // 5 minutes
19    gcTime: 30 * 60 * 1000, // 30 minutes (formerly cacheTime)
20  });
21}
22
23// Single user hook
24export function useUser(id: string) {
25  return useQuery({
26    queryKey: userKeys.detail(id),
27    queryFn: () => fetchUser(id),
28    enabled: !!id, // Don't fetch if no id
29  });
30}
31
32// Mutation with optimistic update
33export function useUpdateUser() {
34  const queryClient = useQueryClient();
35
36  return useMutation({
37    mutationFn: updateUser,
38    onMutate: async (newUser) => {
39      // Cancel outgoing refetches
40      await queryClient.cancelQueries({
41        queryKey: userKeys.detail(newUser.id),
42      });
43
44      // Snapshot previous value
45      const previousUser = queryClient.getQueryData(
46        userKeys.detail(newUser.id),
47      );
48
49      // Optimistically update
50      queryClient.setQueryData(userKeys.detail(newUser.id), newUser);
51
52      return { previousUser };
53    },
54    onError: (err, newUser, context) => {
55      // Rollback on error
56      queryClient.setQueryData(
57        userKeys.detail(newUser.id),
58        context?.previousUser,
59      );
60    },
61    onSettled: (data, error, variables) => {
62      // Refetch after mutation
63      queryClient.invalidateQueries({
64        queryKey: userKeys.detail(variables.id),
65      });
66    },
67  });
68}

 1// Zustand for client state
 2const useUIStore = create<UIState>((set) => ({
 3  sidebarOpen: true,
 4  modal: null,
 5  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
 6  openModal: (modal) => set({ modal }),
 7  closeModal: () => set({ modal: null }),
 8}))
 9
10// React Query for server state
11function Dashboard() {
12  const { sidebarOpen, toggleSidebar } = useUIStore()
13  const { data: users, isLoading } = useUsers({ active: true })
14  const { data: stats } = useStats()
15
16  if (isLoading) return <DashboardSkeleton />
17
18  return (
19    <div className={sidebarOpen ? 'with-sidebar' : ''}>
20      <Sidebar open={sidebarOpen} onToggle={toggleSidebar} />
21      <main>
22        <StatsCards stats={stats} />
23        <UserTable users={users} />
24      </main>
25    </div>
26  )
27}

 1// Before (legacy Redux)
 2const ADD_TODO = "ADD_TODO";
 3const addTodo = (text) => ({ type: ADD_TODO, payload: text });
 4function todosReducer(state = [], action) {
 5  switch (action.type) {
 6    case ADD_TODO:
 7      return [...state, { text: action.payload, completed: false }];
 8    default:
 9      return state;
10  }
11}
12
13// After (Redux Toolkit)
14const todosSlice = createSlice({
15  name: "todos",
16  initialState: [],
17  reducers: {
18    addTodo: (state, action: PayloadAction<string>) => {
19      // Immer allows "mutations"
20      state.push({ text: action.payload, completed: false });
21    },
22  },
23});