<div id="root"></div>

// stateの初期値
const initialState = { count: 0 };

// actionの定義
const COUNT_INCREMENT = "count/increment";
const COUNT_DECREMENT = "count/decrement";
const COUNT_RESET = "count/reset";

// reducerの定義
const reducerFunc = (state, action) => {
  switch (action) {
    case COUNT_INCREMENT:
      return { ...state, count: state.count + 1 };
    case COUNT_DECREMENT:
      return { ...state, count: state.count - 1 };
    case COUNT_RESET:
      return initialState;
    default:
      return state;
  }
};
const Counter = () => {
  const [state, dispatch] = React.useReducer(reducerFunc, initialState);
  
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch(COUNT_INCREMENT)}>increment</button>
      <button onClick={() => dispatch(COUNT_DECREMENT)}>decrement</button>
      <button onClick={() => dispatch(COUNT_RESET)}>reset</button>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Counter />);