使用在父级而不是子级中使用reducer更新的自定义钩子的状态

import { useReducer } from 'react';

// 定义操作类型
const ActionTypes = {
  ADD: 'ADD',
  DELETE: 'DELETE',
  UPDATE: 'UPDATE',
};

// 定义reducer函数
const reducer = (state, action) => {
  switch (action.type) {
    case ActionTypes.ADD:
      return { ...state, count: state.count + 1 };
    case ActionTypes.DELETE:
      return { ...state, count: state.count - 1 };
    case ActionTypes.UPDATE:
      return { ...state, message: action.payload };
    default:
      throw new Error(`Unsupported action type: ${action.type}`);
  }
};

// 自定义钩子
const useCustomHook = () => {
  const initialState = { count: 0, message: '' };
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({ type: ActionTypes.ADD });
  };

  const decrement = () => {
    dispatch({ type: ActionTypes.DELETE });
  };

  const updateMessage = (newMessage) => {
    dispatch({ type: ActionTypes.UPDATE, payload: newMessage });
  };

  return { state, increment, decrement, updateMessage };
};

// 使用自定义钩子
const MyComponent = () => {
  const { state, increment, decrement, updateMessage } = useCustomHook();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <input
        type="text"
        value={state.message}
        onChange={(e) => updateMessage(e.target.value)}
      />
    </div>
  );
};