react-useReducer-counter-reset.js

import React, { useReducer } from "react";
import ReactDOM from "react-dom";

const initData = {
  num: 0,
  message: "クリックしてください"
}

const reducer = ({num} , action) => {
  // eslint-disable-next-line
  switch (action) { 
    case 'increment':
      return {num:num + 1, message:`${num}に+1しました`}
    case 'decrement':
      return {num:num - 1, message:`${num}に-1しました`}
    default:
      return initData
  }
};

export const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initData);
  return (
    <div>
      <p>カウンターアプリ</p>
      <p>{state.message}</p>
      <p>クリック：{state.num}</p>
      <p>
        <button onClick={() => dispatch('decrement')}>-</button>
        <button onClick={() => dispatch('increment')}>+</button>
        <button onClick={() => dispatch()}>reset</button>
      </p>
    </div>
  );
};

ReactDOM.render(<Counter />, document.querySelector("#root"));