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

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

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

示例：Todo 应用

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

1. 添加任务
2. 删除任务
3. 切换任务完成状态

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}><spanstyle={{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><inputtype="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;

3. 代码解释

1. TodoContext:
   • 使用 createContext 创建一个全局状态的上下文。
   • 使用 useReducer 管理全局状态和操作。
2. TodoProvider:
   • 包裹应用的根组件，提供全局状态和 dispatch 方法。
3. useTodoContext:
   • 自定义 Hook，用于简化 useContext 的使用，并确保上下文只能在 TodoProvider 内部使用。
4. todoReducer:
   • 定义了如何根据不同的操作（ADD_TODO、TOGGLE_TODO、DELETE_TODO）更新全局状态。
5. 组件分离:
   • AddTodo 组件负责添加任务。
   • TodoList 组件负责显示任务列表，并支持切换任务状态和删除任务。

4. 优势

• 清晰的状态管理：
  • 使用 useReducer 将状态更新逻辑集中在一个地方，便于维护和扩展。
• 全局状态共享：
  • 使用 createContext 和 useContext 实现全局状态共享，无需手动传递 props。
• 组件解耦：
  • 通过上下文和 dispatch，各组件可以独立处理自己的逻辑，而无需直接依赖其他组件。

5. 总结

createContext + useContext + useReducer 是一种轻量级的全局状态管理方案，适合中小型项目。它的核心思想是：

1. 使用 createContext 提供全局状态。
2. 使用 useReducer 管理状态更新逻辑。
3. 使用 useContext 在组件中访问和操作全局状态。

这种模式简单易用，且不需要引入额外的状态管理库，非常适合 React 项目中需要共享状态的场景。