当前位置：首页 > news >正文

createContext+useContext+useReducer组合管理React复杂状态

news 来源：原创 2025/5/26 11:47:38

`createContext`、`useContext` 和 `useReducer` 的组合是 React 中管理全局状态的一种常见模式。这种模式非常适合在不引入第三方状态管理库（如 Redux）的情况下，管理复杂的全局状态。

以下是一个经典的例子，展示如何使用 createContext、useContext 和 useReducer 来实现一个简单的全局状态管理。

示例：Todo 应用

我们将实现一个简单的 Todo 应用，支持以下功能：

添加任务
删除任务
切换任务完成状态

1. 定义全局状态和操作

TodoContext.tsx

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

// 定义 Todo 项的类型
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

// 定义全局状态的类型
interface TodoState {
  todos: Todo[];
}

// 定义操作类型
type TodoAction =
  | { type: 'ADD_TODO'; payload: string }
  | { type: 'TOGGLE_TODO'; payload: number }
  | { type: 'DELETE_TODO'; payload: number };

// 定义初始状态
const initialState: TodoState = {
  todos: [],
};

// 定义 reducer 函数
const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          { id: Date.now(), text: action.payload, completed: false },
        ],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
};

// 创建 Context
const TodoContext = createContext<{
  state: TodoState;
  dispatch: React.Dispatch<TodoAction>;
} | null>(null);

// 创建 Provider 组件
export const TodoProvider = ({ children }: { children: ReactNode }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
};

// 自定义 Hook，用于使用 TodoContext
export const useTodoContext = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodoContext must be used within a TodoProvider');
  }
  return context;
};

2. 使用全局状态

App.tsx

import React, { useState } from 'react';
import { TodoProvider, useTodoContext } from './TodoContext';

const TodoList = () => {
  const { state, dispatch } = useTodoContext();

  return (
    <div>
      <h2>Todo List</h2>
      <ul>
        {state.todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
                cursor: 'pointer',
              }}
              onClick={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}
            >
              {todo.text}
            </span>
            <button onClick={() => dispatch({ type: 'DELETE_TODO', payload: todo.id })}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

const AddTodo = () => {
  const { dispatch } = useTodoContext();
  const [text, setText] = useState('');

  const handleAddTodo = () => {
    if (text.trim()) {
      dispatch({ type: 'ADD_TODO', payload: text });
      setText('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a new task"
      />
      <button onClick={handleAddTodo}>Add</button>
    </div>
  );
};

const App = () => {
  return (
    <TodoProvider>
      <h1>Todo App</h1>
      <AddTodo />
      <TodoList />
    </TodoProvider>
  );
};

export default App;