State Management — Redux, Zustand, Jotai, TanStack Query

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

// Slice
const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], total: 0 },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
      state.total += action.payload.price;
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(i => i.id !== action.payload);
      state.total = state.items.reduce((sum, i) => sum + i.price, 0);
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions;

// Store
const store = configureStore({
  reducer: {
    cart: cartSlice.reducer,
  },
});

// Component
function Cart() {
  const items = useSelector((state) => state.cart.items);
  const dispatch = useDispatch();

  return (
    <>
      {items.map(item => (
        <div key={item.id}>
          {item.name}
          <button onClick={() => dispatch(removeItem(item.id))}>Xoá</button>
        </div>
      ))}
    </>
  );
}

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartStore {
  items: CartItem[];
  total: number;
  addItem: (item: CartItem) => void;
  removeItem: (id: number) => void;
  clearCart: () => void;
}

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

      addItem: (item) => set((state) => ({
        items: [...state.items, item],
        total: state.total + item.price,
      })),

      removeItem: (id) => {
        const item = get().items.find(i => i.id === id);
        if (!item) return;
        set((state) => ({
          items: state.items.filter(i => i.id !== id),
          total: state.total - item.price,
        }));
      },

      clearCart: () => set({ items: [], total: 0 }),
    }),
    { name: 'cart-storage' } // Persist to localStorage
  )
);

// Component
function Cart() {
  const { items, total, addItem, clearCart } = useCartStore();

  return (
    <div>
      <p>Total: {total}</p>
      <button onClick={() => addItem({ id: 1, name: 'Laptop', price: 1000 })}>
        Add
      </button>
      <button onClick={clearCart}>Clear</button>
    </div>
  );
}

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

const userAtom = atom(async () => {
  const res = await fetch('/api/user');
  return res.json();
});

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

function User() {
  const [user] = useAtom(userAtom);
  return <div>{user.name}</div>;
}

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

// Fetch data
function usePosts() {
  return useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
    staleTime: 5 * 60 * 1000, // 5 phút mới gọi lại
  });
}

// Mutate data
function useCreatePost() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (newPost) =>
      fetch('/api/posts', {
        method: 'POST',
        body: JSON.stringify(newPost),
      }).then(r => r.json()),

    onSuccess: () => {
      // Invalidate cache → tự động refetch
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
  });
}

// Component
function Posts() {
  const { data, isLoading, error } = usePosts();
  const createPost = useCreatePost();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <>
      <button onClick={() => createPost.mutate({ title: 'New post' })}>
        Create
      </button>
      {data.map(post => <PostItem key={post.id} post={post} />)}
    </>
  );
}

// Kết hợp Zustand (UI state) + TanStack Query (server state)

// UI state
const useUIStore = create(() => ({
  sidebarOpen: false,
  theme: 'light',
}));

// Server state — tự động cache, refetch, optimistic update
function useProjects() {
  return useQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
  });
}

// Component
function Dashboard() {
  const { sidebarOpen, toggleSidebar } = useUIStore();
  const { data: projects, isLoading } = useProjects();

  return (
    <div className={sidebarOpen ? 'sidebar-open' : ''}>
      <button onClick={toggleSidebar}>Toggle</button>
      {isLoading ? <Spinner /> : <ProjectList projects={projects} />}
    </div>
  );
}