Module 06 — State Management

&127919; Mục tiêu học tập

• Phân biệt rõ Client State vs Server State — biết chọn đúng tool cho đúng loại state
• Hiểu vấn đề re-render của Context API và cách khắc phục bằng split contexts
• Thành thạo Redux Toolkit: store, slice, createAsyncThunk, selectors, middleware
• Sử dụng Zustand như lightweight alternative — hiểu tại sao nó nhanh hơn Redux trong nhiều case
• Nắm vững TanStack Query (React Query): caching, staleTime, gcTime, mutations, optimistic updates
• Biết khi nào dùng local state, khi nào lift up, khi nào global
• Normalize state cho các entity relationships phức tạp

&128214; Hướng dẫn học

&9889; Ôn nhanh

🧭 Vòng lặp học module này

&128204; Decision tree chọn state tool

&128218; Lý thuyết chi tiết

1. Client State vs Server State — Mental Model

2. Context API

Khi nào dùng Context?

• Theme (dark/light)
• Locale / i18n
• Auth user (current user object)
• Feature flags
• Data ít thay đổi, cần ở nhiều nơi

Re-render Problem

Ví dụ gây re-render không cần thiết:

const AppContext = React.createContext({
  user: null,
  theme: "light",
  notifications: [],
});

function Header() {
  const { theme } = useContext(AppContext);
  return <View style={{ backgroundColor: theme === "dark" ? "#000" : "#fff" }} />;
}

Component Header chỉ dùng theme, nhưng khi notifications thay đổi, Header vẫn re-render vì cùng context.

Giải pháp: Split Contexts

const ThemeContext = React.createContext("light");
const UserContext = React.createContext(null);
const NotificationContext = React.createContext([]);

function AppProviders({ children }) {
  const [theme, setTheme] = useState("light");
  const [user, setUser] = useState(null);
  const [notifications, setNotifications] = useState([]);

  return (
    <ThemeContext.Provider value={theme}>
      <UserContext.Provider value={user}>
        <NotificationContext.Provider value={notifications}>
          {children}
        </NotificationContext.Provider>
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

Giờ Header chỉ subscribe ThemeContext → không re-render khi notifications thay đổi.

const StateContext = React.createContext(null);
const DispatchContext = React.createContext(null);

function Provider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <DispatchContext.Provider value={dispatch}>
      <StateContext.Provider value={state}>
        {children}
      </StateContext.Provider>
    </DispatchContext.Provider>
  );
}

3. Redux Toolkit (RTK)

Store & Slice

import { configureStore, createSlice, PayloadAction } from "@reduxjs/toolkit";

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

interface TodoState {
  items: Todo[];
  filter: "all" | "active" | "completed";
}

const initialState: TodoState = {
  items: [],
  filter: "all",
};

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo(state, action: PayloadAction<{ id: string; title: string }>) {
      state.items.push({
        id: action.payload.id,
        title: action.payload.title,
        completed: false,
      });
    },
    toggleTodo(state, action: PayloadAction<string>) {
      const todo = state.items.find((t) => t.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    removeTodo(state, action: PayloadAction<string>) {
      state.items = state.items.filter((t) => t.id !== action.payload);
    },
    setFilter(state, action: PayloadAction<TodoState["filter"]>) {
      state.filter = action.payload;
    },
  },
});

export const { addTodo, toggleTodo, removeTodo, setFilter } = todoSlice.actions;

const store = configureStore({
  reducer: {
    todos: todoSlice.reducer,
  },
});

createAsyncThunk

import { createAsyncThunk } from "@reduxjs/toolkit";

const fetchTodos = createAsyncThunk(
  "todos/fetchTodos",
  async (_, { rejectWithValue }) => {
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/todos");
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

Xử lý trong slice với extraReducers:

const todoSlice = createSlice({
  name: "todos",
  initialState: {
    items: [],
    status: "idle",
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.items = action.payload;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.payload;
      });
  },
});

createSelector (Memoized Selectors)

import { createSelector } from "@reduxjs/toolkit";

const selectTodos = (state) => state.todos.items;
const selectFilter = (state) => state.todos.filter;

const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    switch (filter) {
      case "active":
        return todos.filter((t) => !t.completed);
      case "completed":
        return todos.filter((t) => t.completed);
      default:
        return todos;
    }
  }
);

createSelector (từ Reselect) chỉ tính toán lại khi inputs thay đổi. Quan trọng cho derived data — tránh re-compute mỗi render.

Middleware: Thunk vs Saga

Redux Persist

import AsyncStorage from "@react-native-async-storage/async-storage";
import { persistStore, persistReducer } from "redux-persist";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  whitelist: ["auth", "settings"],
  blacklist: ["ui"],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"],
      },
    }),
});

const persistor = persistStore(store);

whitelist chỉ persist các slices cần thiết (auth token, user settings). blacklist loại bỏ UI state không cần lưu. Luôn dùng AsyncStorage cho React Native thay vì localStorage.

4. Zustand

Basic Zustand Store

import { create } from "zustand";

interface TodoStore {
  items: Todo[];
  filter: "all" | "active" | "completed";
  addTodo: (title: string) => void;
  toggleTodo: (id: string) => void;
  removeTodo: (id: string) => void;
  setFilter: (filter: TodoStore["filter"]) => void;
}

const useTodoStore = create<TodoStore>((set) => ({
  items: [],
  filter: "all",

  addTodo: (title) =>
    set((state) => ({
      items: [
        ...state.items,
        { id: Date.now().toString(), title, completed: false },
      ],
    })),

  toggleTodo: (id) =>
    set((state) => ({
      items: state.items.map((t) =>
        t.id === id ? { ...t, completed: !t.completed } : t
      ),
    })),

  removeTodo: (id) =>
    set((state) => ({
      items: state.items.filter((t) => t.id !== id),
    })),

  setFilter: (filter) => set({ filter }),
}));

Sử dụng trong Component

function TodoList() {
  const items = useTodoStore((state) => state.items);
  const toggleTodo = useTodoStore((state) => state.toggleTodo);

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <Pressable onPress={() => toggleTodo(item.id)}>
          <Text>{item.title}</Text>
        </Pressable>
      )}
    />
  );
}

Mỗi useTodoStore call với selector riêng → component chỉ re-render khi phần data nó subscribe thực sự thay đổi. Đây là lợi thế lớn so với Context API.

Persist & Devtools Middleware

import { create } from "zustand";
import { persist, devtools } from "zustand/middleware";
import AsyncStorage from "@react-native-async-storage/async-storage";

const useTodoStore = create<TodoStore>()(
  devtools(
    persist(
      (set) => ({
        items: [],
        filter: "all",
        addTodo: (title) =>
          set((state) => ({
            items: [
              ...state.items,
              { id: Date.now().toString(), title, completed: false },
            ],
          })),
      }),
      {
        name: "todo-storage",
        storage: {
          getItem: async (name) => {
            const value = await AsyncStorage.getItem(name);
            return value ? JSON.parse(value) : null;
          },
          setItem: async (name, value) => {
            await AsyncStorage.setItem(name, JSON.stringify(value));
          },
          removeItem: async (name) => {
            await AsyncStorage.removeItem(name);
          },
        },
      }
    )
  )
);

Shopping Cart Example

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartStore {
  items: CartItem[];
  addItem: (product: Omit<CartItem, "quantity">) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
  totalPrice: () => number;
  totalItems: () => number;
}

const useCartStore = create<CartStore>((set, get) => ({
  items: [],

  addItem: (product) =>
    set((state) => {
      const existing = state.items.find((i) => i.id === product.id);
      if (existing) {
        return {
          items: state.items.map((i) =>
            i.id === product.id ? { ...i, quantity: i.quantity + 1 } : i
          ),
        };
      }
      return { items: [...state.items, { ...product, quantity: 1 }] };
    }),

  removeItem: (id) =>
    set((state) => ({
      items: state.items.filter((i) => i.id !== id),
    })),

  updateQuantity: (id, quantity) =>
    set((state) => ({
      items:
        quantity <= 0
          ? state.items.filter((i) => i.id !== id)
          : state.items.map((i) =>
              i.id === id ? { ...i, quantity } : i
            ),
    })),

  clearCart: () => set({ items: [] }),

  totalPrice: () =>
    get().items.reduce((sum, item) => sum + item.price * item.quantity, 0),

  totalItems: () =>
    get().items.reduce((sum, item) => sum + item.quantity, 0),
}));

Code Comparison: Redux Toolkit vs Zustand

5. TanStack Query (React Query)

staleTime vs gcTime

useQuery

import { useQuery } from "@tanstack/react-query";

interface User {
  id: string;
  name: string;
  email: string;
}

function useUser(userId: string) {
  return useQuery<User>({
    queryKey: ["user", userId],
    queryFn: async () => {
      const res = await fetch(`https://api.example.com/users/${userId}`);
      if (!res.ok) throw new Error("Failed to fetch user");
      return res.json();
    },
    staleTime: 5 * 60 * 1000,
    retry: 2,
  });
}

function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, isError, error } = useUser(userId);

  if (isLoading) return <ActivityIndicator />;
  if (isError) return <Text>Error: {error.message}</Text>;

  return <Text>{data.name}</Text>;
}

useMutation

import { useMutation, useQueryClient } from "@tanstack/react-query";

function useUpdateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (userData: Partial<User> & { id: string }) => {
      const res = await fetch(`https://api.example.com/users/${userData.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(userData),
      });
      if (!res.ok) throw new Error("Failed to update");
      return res.json();
    },
    onSuccess: (data, variables) => {
      queryClient.invalidateQueries({ queryKey: ["user", variables.id] });
      queryClient.invalidateQueries({ queryKey: ["users"] });
    },
  });
}

useInfiniteQuery

import { useInfiniteQuery } from "@tanstack/react-query";

function useInfinitePosts() {
  return useInfiniteQuery({
    queryKey: ["posts"],
    queryFn: async ({ pageParam = 1 }) => {
      const res = await fetch(
        `https://api.example.com/posts?page=${pageParam}&limit=20`
      );
      return res.json();
    },
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.hasMore ? allPages.length + 1 : undefined;
    },
    initialPageParam: 1,
  });
}

function PostFeed() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfinitePosts();

  const allPosts = data?.pages.flatMap((page) => page.items) ?? [];

  return (
    <FlatList
      data={allPosts}
      onEndReached={() => hasNextPage && fetchNextPage()}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        isFetchingNextPage ? <ActivityIndicator /> : null
      }
      renderItem={({ item }) => <PostCard post={item} />}
    />
  );
}

Optimistic Updates

function useLikePost() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (postId: string) =>
      fetch(`/api/posts/${postId}/like`, { method: "POST" }),

    onMutate: async (postId) => {
      await queryClient.cancelQueries({ queryKey: ["posts", postId] });

      const previousPost = queryClient.getQueryData(["posts", postId]);

      queryClient.setQueryData(["posts", postId], (old: Post) => ({
        ...old,
        likes: old.likes + 1,
        isLiked: true,
      }));

      return { previousPost };
    },

    onError: (_error, postId, context) => {
      queryClient.setQueryData(["posts", postId], context?.previousPost);
    },

    onSettled: (_data, _error, postId) => {
      queryClient.invalidateQueries({ queryKey: ["posts", postId] });
    },
  });
}

Flow: User tap like → UI update ngay lập tức (optimistic) → gửi API request → nếu fail, rollback về state cũ → cuối cùng luôn invalidate để đồng bộ với server.

Offline Support

6. State Normalization

interface NormalizedState {
  users: Record<string, User>;
  posts: Record<string, Post>;
  comments: Record<string, Comment>;
}

const normalizedState: NormalizedState = {
  users: {
    u1: { id: "u1", name: "Alice" },
    u2: { id: "u2", name: "Bob" },
  },
  posts: {
    p1: { id: "p1", authorId: "u1", commentIds: ["c1", "c2"] },
  },
  comments: {
    c1: { id: "c1", authorId: "u2", text: "Great post!" },
    c2: { id: "c2", authorId: "u1", text: "Thanks!" },
  },
};

Khi update user u1 name, chỉ cần update 1 chỗ → tất cả nơi reference u1 tự động nhận data mới.

7. Bảng so sánh tổng hợp

8. Khi nào Local vs Lift Up vs Global?

&10067; Câu hỏi phỏng vấn + Đáp án

🛠️ Debug playbook: state bug

&127947; Bài tập

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);
const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });
unsubscribe();
store.dispatch({ type: "INCREMENT" });

type Reducer<S, A> = (state: S, action: A) => S;
type Listener = () => void;

function createStore<S, A>(reducer: Reducer<S, A>, initialState?: S) {
  let state = initialState ?? reducer(undefined as S, { type: "@@INIT" } as A);
  let listeners: Listener[] = [];

  function getState(): S {
    return state;
  }

  function dispatch(action: A): void {
    state = reducer(state, action);
    listeners.forEach((listener) => listener());
  }

  function subscribe(listener: Listener): () => void {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  return { getState, dispatch, subscribe };
}

const emitter = new EventEmitter();

emitter.on("data", (x) => console.log("A:", x));
emitter.once("data", (x) => console.log("B:", x));

emitter.emit("data", 42);
emitter.emit("data", 99);

type Callback = (...args: unknown[]) => void;

class EventEmitter {
  private events: Map<string, Callback[]> = new Map();

  on(event: string, callback: Callback): void {
    const callbacks = this.events.get(event) ?? [];
    callbacks.push(callback);
    this.events.set(event, callbacks);
  }

  off(event: string, callback: Callback): void {
    const callbacks = this.events.get(event);
    if (!callbacks) return;
    this.events.set(
      event,
      callbacks.filter((cb) => cb !== callback)
    );
  }

  emit(event: string, ...args: unknown[]): void {
    const callbacks = this.events.get(event);
    if (!callbacks) return;
    callbacks.forEach((cb) => cb(...args));
  }

  once(event: string, callback: Callback): void {
    const wrapper: Callback = (...args) => {
      callback(...args);
      this.off(event, wrapper);
    };
    this.on(event, wrapper);
  }
}

&128187; Mini exercise thực tế React Native

&9888; Lỗi thường gặp

&127970; Case đi làm thật

&129504; Ghi nhớ nhanh

&10067; Câu hỏi tự kiểm tra

&9989; Checklist tự đánh giá

&128206; Tài nguyên