【React】useReducerを使って四則演算の結果を表示するアプリ作成方法

2022年12月30日React

ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。
数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。

ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方

コード全体は以下の通りです。

import { useReducer } from "react";

const CALC_OPTIONS = ["add", "minus", "divide", "multiply"];

const reducer = (state, { payload }) => {

  const newState = { ...state, type: payload.type, [payload.name]: payload.value };

  switch (payload.type) {
    case "add":
      return { ...newState, result: newState.a + newState.b };
    case "minus":
      return { ...newState, result: newState.a - newState.b };
    case "divide":
      return { ...newState, result: newState.a / newState.b };
    case "multiply":
      return { ...newState, result: newState.a * newState.b };
    default:
      throw new Error("actionを正しく設定してください。");
  }
};

const Sample = () => {
  const initState = {
    a: 1,
    b: 1,
    result: 2,
    type: "add",
  };

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

  const calculate = (e) => {
    dispatch({ payload: { type: e.target.value } });
  };

  const numChangeHandler = (e) => {
    dispatch({
      payload: {
        type: state.type,
        name: e.target.name,
        value: parseInt(e.target.value),
      },
    });
  };

  return (
    <>
      <div>
        a:
        <input
          type="number"
          name="a"
          value={state.a}
          onChange={numChangeHandler}
        />
      </div>
      <div>
        b:
        <input
          type="number"
          name="b"
          value={state.b}
          onChange={numChangeHandler}
        />
      </div>
      <select value={state.type} onChange={calculate}>
        {CALC_OPTIONS.map((type) => (
          <option key={type} value={type}>
            {type}
          </option>
        ))}
      </select>
      <h1>計算結果：{state.result}</h1>
    </>
  );
};

export default Sample;

useReducerの基本的な使い方は以下を参照してみてください。

肝のreducer部分の説明をします。
関数の引数でstateとpayloadを受け取ります。
四則演算のタイプが変わる場合と、数字が変わる場合の両方の場合で再計算したいので、新しいtypeと数字を格納したオブジェクト(newState)を作成します。
そのオブジェクトであとは四則演算を記述します。

calculateの関数では、selectタグで選択した四則演算のタイプを変化させています。e.target.valueで現在選択中のタイプを取得できます。

numChangeHandlerの関数では、タイプは現在の状態のタイプ、nameはname属性から、valueはvalue属性からそれぞれ取得してpayloadにセットします。
注意点としてはvalue属性の数字が文字列になってしまうので、parseInt()を使って数字にする必要があります。
あとは表示するだけとなります。