出典:YouTubeコードhttps://www.youtube.com/watch?v=tdORpiegLg0

userreducerとは?

usStateのようにステータスを作成および管理できるツール

の複数のサブ値を含む複雑な状態を使用する必要がある場合は、UserStateではなくUserReducerを使用します.

useReducerのコンポーネント

Reducer

Dispatch

Action

reduceは、dispatchに含まれる動作内容に基づいて状態を更新することができる.
例えば、Aが銀行(reduce)で預金取引明細(state)を更新したい場合は、銀行に要求(dispatch)を発行し、要求内容(action)は「1万元送金してください」とする.はい.すなわち、銀行(reduce)は、取り消し要求の内容(dispatchのaction)に基づいて取引履歴(state)を更新する.

Dispatch関数のパラメータにActionを加え、Reducer→Reducerに送信して受信し、Actionコンテンツに従ってステータスを更新します.

送金送金送金ロジックの作成

1.usereducerとuserStateをインポートします。

import React, { useReducer, useState } from "react";

2.actionのタイプを指定します。

const ACTION_TYPES = {
  DEPOSIT: "deposit",
  WITHDRAW: "withdraw"
};

3.状態初期値の指定

userStateの初期値(0)とuserReducerにreducerと初期値(0)を加えます.numberstateはinput値の状態値です.

function App() {
  const [money, dispatch] = useReducer(reducer, 0);
  const [number, setNumber] = useState(0);

4. onClick -> dispatch

ボタンをクリックすると、減速機に送信する要求(スケジューリングスキームのaction)が加わる.

  return (
    <div className="App">
      <h1>잔고: {money}원</h1>

      <input
        type="number"
        value={number}
        onChange={(e) => {
          setNumber(parseInt(e.target.value));
        }}
        step="1000"
      />

      <button
        onClick={() => {
          dispatch({ type: ACTION_TYPES.DEPOSIT, payload: number });
        }}
      >
        {" "}
        예금{" "}
      </button>
      <button
        onClick={() => {
          dispatch({ type: ACTION_TYPES.WITHDRAW, payload: number });
        }}
      >
        {" "}
        출금{" "}
      </button>
    </div>
  );

5.App関数の上に減速機を作成する

実行する内容をswitch文でaction typeに基づいて区別します.
預金の場合は、既存のステータスの値をペイロードに追加し、decoreの場合は既存のステータスの値を減算します.

const reducer = (state, action) => {
  switch (action.type) {
    case ACTION_TYPES.DEPOSIT:
      return state + action.payload;
    case ACTION_TYPES.WITHDRAW:
      return state - action.payload;
    default:
      return state;
  }
};

完全なコード

import React, { useReducer, useState } from "react";
import "./styles.css";

const ACTION_TYPES = {
  DEPOSIT: "deposit",
  WITHDRAW: "withdraw"
};

const reducer = (state, action) => {
  switch (action.type) {
    case ACTION_TYPES.DEPOSIT:
      return state + action.payload;
    case ACTION_TYPES.WITHDRAW:
      return state - action.payload;
    default:
      return state;
  }
};

function App() {
  const [money, dispatch] = useReducer(reducer, 0);
  const [number, setNumber] = useState(0);
  return (
    <div className="App">
      <h1>잔고: {money}원</h1>

      <input
        type="number"
        value={number}
        onChange={(e) => {
          setNumber(parseInt(e.target.value));
        }}
        step="1000"
      />

      <button
        onClick={() => {
          dispatch({ type: ACTION_TYPES.DEPOSIT, payload: number });
        }}
      >
        {" "}
        예금{" "}
      </button>
      <button
        onClick={() => {
          dispatch({ type: ACTION_TYPES.WITHDRAW, payload: number });
        }}
      >
        {" "}
        출금{" "}
      </button>
    </div>
  );
}

export default App;