🏗️ Bài 20: State Management - Quản Lý State Toàn Cục

import { createContext, useContext, useReducer } from 'react';

// Actions
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const DELETE_TODO = 'DELETE_TODO';

function todoReducer(state, action) {
    switch (action.type) {
        case ADD_TODO: return [...state, { id: Date.now(), text: action.payload, done: false }];
        case TOGGLE_TODO: return state.map(t => t.id === action.payload ? { ...t, done: !t.done } : t);
        case DELETE_TODO: return state.filter(t => t.id !== action.payload);
        default: return state;
    }
}

const TodoContext = createContext();

function TodoProvider({ children }) {
    const [todos, dispatch] = useReducer(todoReducer, []);
    return (
        <TodoContext.Provider value={{ todos, dispatch }}>
            {children}
        </TodoContext.Provider>
    );
}

const useTodos = () => useContext(TodoContext);

// Sử dụng
function TodoList() {
    const { todos, dispatch } = useTodos();
    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>
                    <span onClick={() => dispatch({ type: TOGGLE_TODO, payload: todo.id })}
                        style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                        {todo.text}
                    </span>
                    <button onClick={() => dispatch({ type: DELETE_TODO, payload: todo.id })}>✕</button>
                </li>
            ))}
        </ul>
    );
}

import { create } from 'zustand';

const useStore = create((set) => ({
    count: 0,
    todos: [],
    increment: () => set(state => ({ count: state.count + 1 })),
    addTodo: (text) => set(state => ({
        todos: [...state.todos, { id: Date.now(), text, done: false }]
    })),
    toggleTodo: (id) => set(state => ({
        todos: state.todos.map(t => t.id === id ? { ...t, done: !t.done } : t)
    })),
}));

// Sử dụng - không cần Provider!
function Counter() {
    const count = useStore(state => state.count);
    const increment = useStore(state => state.increment);
    return <button onClick={increment}>Count: {count}</button>;
}