React轻量级状态管理方案（useReducer + Context API）

React轻量级状态管理方案（useReducer + Context API）

🤔 为什么需要轻量级状态管理？

在React应用开发中，随着组件层次的增加和状态复杂度的提升，传统的props传递方式会变得越来越繁琐：

• 多层级组件需要通过props逐层传递数据（props drilling）
• 多个组件共享同一份状态时，状态同步变得困难
• 组件间通信需要通过复杂的回调函数
• 大型状态管理库（如Redux）可能带来不必要的复杂性

对于中等规模的应用，我们可以使用React内置的useReducer和Context API组合，实现一个轻量级、高效的状态管理方案，既避免了props drilling，又不需要引入额外的依赖。

💡 基础概念

1. useReducer Hook

useReducer是React提供的一个Hook，用于管理复杂的状态逻辑。它类似于Redux的思想：

• 状态通过reducer函数进行更新
• 状态更新需要派发（dispatch）一个动作（action）
• reducer函数接收当前状态和动作，返回新的状态

语法：

const [state, dispatch] = useReducer(reducer, initialState);

2. Context API

Context API是React提供的一种在组件树中共享数据的方式，不需要通过props逐层传递：

• 使用createContext创建一个Context对象
• 使用Provider组件包裹需要共享数据的组件树
• 使用useContext在子组件中获取共享数据

语法：

// 创建Context
const MyContext = createContext(defaultValue);

// 提供Context
<MyContext.Provider value={
   
   value}>
  {
   
   /* 子组件 */}
</MyContext.Provider>

// 消费Context
const value = useContext(MyContext);

🚀 基础实现：计数器应用

让我们先通过一个简单的计数器应用，了解useReducer和Context API的基础用法。

1. 创建状态管理文件

// src/contexts/CounterContext.js
import React, {
   
    createContext, useContext, useReducer } from 'react';

// 定义初始状态
const initialState = {
   
   
  count: 0,
  history: [0],
  isUndoDisabled: true,
  isRedoDisabled: true
};

// 定义action类型
const ActionTypes = {
   
   
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT',
  RESET: 'RESET',
  UNDO: 'UNDO',
  REDO: 'REDO',
  SET_COUNT: 'SET_COUNT'
};

// 创建reducer函数
const counterReducer = (state, action) => {
   
   
  switch (action.type) {
   
   
    case ActionTypes.INCREMENT:
      return {
   
   
        ...state,
        count: state.count + 1,
        history: [...state.history, state.count + 1],
        currentIndex: state.history.length,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    case ActionTypes.DECREMENT:
      return {
   
   
        ...state,
        count: state.count - 1,
        history: [...state.history, state.count - 1],
        currentIndex: state.history.length,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    case ActionTypes.RESET:
      return {
   
   
        ...state,
        count: 0,
        history: [...state.history, 0],
        currentIndex: state.history.length,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    case ActionTypes.UNDO:
      if (state.currentIndex <= 0) return state;
      const newIndex = state.currentIndex - 1;
      return {
   
   
        ...state,
        count: state.history[newIndex],
        currentIndex: newIndex,
        isUndoDisabled: newIndex === 0,
        isRedoDisabled: false
      };
      
    case ActionTypes.REDO:
      if (state.currentIndex >= state.history.length - 1) return state;
      const nextIndex = state.currentIndex + 1;
      return {
   
   
        ...state,
        count: state.history[nextIndex],
        currentIndex: nextIndex,
        isUndoDisabled: false,
        isRedoDisabled: nextIndex === state.history.length - 1
      };
      
    case ActionTypes.SET_COUNT:
      return {
   
   
        ...state,
        count: action.payload,
        history: [...state.history.slice(0, state.currentIndex + 1), action.payload],
        currentIndex: state.currentIndex + 1,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    default:
      return state;
  }
};

// 创建Context
const CounterContext = createContext(null);

// 创建Provider组件
export const CounterProvider = ({
    
     children }) => {
   
   
  const [state, dispatch] = useReducer(counterReducer, initialState);
  
  // 定义操作函数
  const actions = {
   
   
    increment: () => dispatch({
   
    type: ActionTypes.INCREMENT }),
    decrement: () => dispatch({
   
    type: ActionTypes.DECREMENT }),
    reset