React存储未使用React.useReducer更新上下文

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

// 创建上下文对象
const MyContext = createContext();

// 初始状态
const initialState = { count: 0 };

// reducer函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error('Unsupported action type');
  }
};

const MyComponent = () => {
  // 使用useReducer创建状态和更新状态的dispatch函数
  const [state, dispatch] = useReducer(reducer, initialState);

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

const ChildComponent = () => {
  // 使用useContext访问上下文中的值
  const { state, dispatch } = useContext(MyContext);

  const handleIncrement = () => {
    dispatch({ type: 'increment' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'decrement' });
  };

  return (
    <div>
      Count: {state.count}
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};