useState()를 useReducer()로 재구성

본고는 최초www.aboutmonica.com에 발표되었다.
최근에 나는 애정법안과 워싱턴포스트의 데이터에 근거하여 Stimulus Check Calculator 을 만들어서 그들이 애정법안 아래에서 자극하는 수표 금액을 추정하는 데 도움을 주었다.
본고는 여러 개useState()React 연결을 단일useReducer()에 통합시켜 계산기의 상태 관리를 재구성하는 방법을 소개한다.useReducer()는 useState() 관리 기능 구성 요소의 상태를 사용할 때 고려할 수 있는 대체 방안이다.본고는 당신이 state management in React과 React Hooks에 대해 좀 익숙하다고 가정합니다.

Stimulus Check Calculator의 화면 캡처.
개요:

Managing form state with useState();

Setting the initial state with useState()

Updating form state with useState()

Managing form state with useReducer();

Setting the initial state with useReducer()

Updating form state with useReducer()

Full Source Code of Examples

source code using useState():

source code using useReducer():

useState () 를 사용하여 양식 상태를 관리합니다.

useState() React 갈고리를 사용하여 계산기의 상태를 관리하기 위해서는 먼저 React에서 가져와야 합니다 useState.

import { useState } from "react";

useState () 를 사용하여 초기 상태 설정

그리고 Form 구성 요소로 돌아가는 함수에서 useState(), taxYear, filingStatus, income, children 및 stimulusAmount 연결을 설정합니다.

  const { SINGLE, HEADOFHOUSE, MARRIED } = filingStatuses;
  const [taxYear, setTaxYear] = useState(2019);
  const [filingStatus, setFilingStatus] = useState(SINGLE);
  const [income, setIncome] = useState("75000");
  const [children, setChildren] = useState(0);
  const [stimulusAmount, setStimulusAmount] = useState(-1);

전송된 매개변수useState()는 특정 상태의 기본값을 나타냅니다.이것은 다음 줄에서 상태의 기본값 taxYear 을 2019 으로 설정하고 있음을 의미합니다.

const [taxYear, setTaxYear] = useState(2019);

useState () 를 사용하여 양식 상태 업데이트

이벤트 프로세서 (예: onChange 또는 onClick 는 폼이 변경될 때 구성 요소의 상태를 업데이트하는 데 사용할 수 있습니다.구성 요소의 내부 상태를 업데이트하여 양식 상태를 관리하는 것은 DOM이 양식 상태를 관리하는 것이 아니라 "controlled component"로 간주됩니다.taxYear의 값을 선택한 연도로 업데이트하기 위해 onClick 이벤트 프로세서 호출setTaxYear(year)이 있습니다. 이 중 year 매개 변수는 현재 year 입니다.

 {[2019, 2018].map(year => (
            <button
              onClick={() => setTaxYear(year)}
              className={year == taxYear ? "selectedButton" : ""}
              key={year}
              name="tax-year"
            >
              {year == 2019 ? "Yes" : "No"}
            </button>
          ))}

양식 데이터를 업데이트하거나 제출할 때 유사한 논리는 업데이트filingStatusincome및children,stimulusAmount및handleSubmit에 사용됩니다.
##useReducer()를 사용하여 양식 상태를 관리합니다.useReducer() React 갈고리를 사용하여 계산기의 상태를 관리하기 위해서는 먼저 React에서 가져와야 합니다 useReducer.JavaScript의 reducers 에 익숙하지 않은 경우 Understanding Reduce in Javascript 의 내 글을 참조하십시오.

import { useReducer } from "react";

useReducer()를 사용하여 초기 상태 설정

그런 다음 다음과 같은 구성 요소의 초기 상태를 설정합니다.

const initialState = {
    taxYear: 2019,
    filingStatus: SINGLE,
    income: "75000",
    children: 0,
    stimulusAmount: -1,
  };

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

useState와 유사하게useReducer 관련 상태를 되돌리고 상태를 업데이트하는 방법입니다.useReducer에 값을 전달하는 대신 setState() 상태를 업데이트하려면 동작을 스케줄링해야 합니다. 이 동작은 reducer 호출됩니다.
내 예에서 reducer 함수는 다음과 같이 보인다.

  function reducer(state, action) {
  const { type, payload } = action;
  return { ...state, [type]: payload };
}

useReducer()를 사용하여 양식 상태 업데이트

호출dispatch할 때마다 action를 포함하는 type항을 사용해야 하며, 이 경우 payload를 포함하는 onClick항을 사용해야 한다.납세 연도 갱신 상태 활성화 reducer(state, action)

 onClick={() => dispatch({ type: "taxYear", payload: year })}

아니다

    onClick={() => setTaxYear(year)}

action 기대 수신type, 이 대상은 payload 및type을 가지고 있다.감속기 기능에서 동작payload과 state은 전류[type]: payload를 되돌려 덮어쓰는 데 사용된다.

  const { type, payload } = action;
  return { ...state, [type]: payload };

현재 상태:

const initialState = {
    taxYear: 2019,
    filingStatus: SINGLE,
    income: "75000",
    children: 0,
    stimulusAmount: -1,
  };

그리고 터치 onClick={() => dispatch({ type: "taxYear", payload: 2018 })} 하면 감속기가 현재 상태로 돌아가지만 taxYear 값만 덮어쓰고 2018로 설정됩니다.주의: 이것은 본 예의 모든 동작에 대해 동작의 type 과 state 의 상응하는 키 값이 같기 때문이다.

예시된 전체 소스 코드

아래의 완전한 원본 코드는 상술한 상태 관리 방법의 완전한 실현을 비교했다.위에서 보듯이 useReducer() 는 다른 React 갈고리로 상태 관리에 사용할 수 있고 useState() 갈고리를 합병할 수 있는 논리적인 방식으로 실현할 수 있다.현재 버전 계산기의 관련 소스 코드는 GitHub 에서 얻을 수 있습니다.

useState()의 소스 코드 사용:

import { filingStatuses } from "../utils/constants";
import { getStimulusAmount } from "../utils/calculateStimulus";
import { useState } from "react";



function Form() {
  const { SINGLE, HEADOFHOUSE, MARRIED } = filingStatuses;
  const [taxYear, setTaxYear] = useState(2019);
  const [filingStatus, setFilingStatus] = useState(SINGLE);
  const [income, setIncome] = useState("75000");
  const [children, setChildren] = useState(0);
  const [stimulusAmount, setStimulusAmount] = useState(-1);

  function handleSubmit(e) {
    e.preventDefault();
    setStimulusAmount(calculateStimulus(income, filingStatus, children));
  }

  return (
        <form onSubmit={handleSubmit}>
          <label htmlFor="tax-year">Have you filed your 2019 taxes yet?</label>
          {[2019, 2018].map(year => (
            <button
              onClick={() => setTaxYear(year)}
              className={year == taxYear ? "selectedButton" : ""}
              key={year}
              name="tax-year"
            >
              {year == 2019 ? "Yes" : "No"}
            </button>
          ))}
          <label htmlFor="filing-status">
            What was your filing status in your {taxYear} taxes?{" "}
          </label>
          {[SINGLE, MARRIED, HEADOFHOUSE].map(status => (
            <button
              onClick={() => setFilingStatus(status)}
              className={status == filingStatus ? "selectedButton" : ""}
              name="filing-status"
              key={status}
            >
              {" "}
              {status}
            </button>
          ))}
          <br />
          <label htmlFor="adjusted-income">
            What was your adjusted gross income in {taxYear}?
          </label>
          ${" "}
          <input
            type="number"
            inputMode="numeric"
            pattern="[0-9]*"
            value={income}
            onChange={e => setIncome(e.target.value)}
            min={0}
            name="adjusted-income"
          />
          <br />
          <label htmlFor="children">
            How many children under age 17 did you claim as dependents in{" "}
            {taxYear}?
          </label>
          <input
            type="number"
            inputMode="numeric"
            pattern="[0-9]*"
            value={children}
            onChange={e => setChildren(e.target.value)}
            min={0}
            name="label"
          />
          <br />
          <button type="submit" className="calculateButton">
            Calculate
          </button>
          <p>
            {" "}
            {stimulusAmount >= 0 &&
              (stimulusAmount > 0
                ? `Your stimulus amount is expected to be $${stimulusAmount}.`
                : `You are not expected to receive a stimulus.`)}
          </p>
          <br />
        </form>
  );
}

export default Form;

useReducer()의 소스 코드 사용:

import { useReducer } from "react";
import { filingStatuses } from "../utils/constants";
import { getStimulusAmount } from "../utils/calculateStimulus";

function reducer(state, action) {
  const { type, payload } = action;
  return { ...state, [type]: payload };
}

function Form() {
  const { SINGLE, HEADOFHOUSE, MARRIED } = filingStatuses;

  const initialState = {
    taxYear: 2019,
    filingStatus: SINGLE,
    income: "75000",
    children: 0,
    stimulusAmount: -1,
  };

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

  function handleSubmit(e) {
    e.preventDefault();
    dispatch({
      type: "stimulusAmount",
      payload: getStimulusAmount(income, filingStatus, children),
    });
  }

  const { taxYear, filingStatus, income, children, stimulusAmount } = state;

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="tax-year">Have you filed your 2019 taxes yet?</label>
      {[2019, 2018].map((year) => (
        <button
          onClick={() => dispatch({ type: "taxYear", payload: year })}
          className={year == taxYear ? "selectedButton" : ""}
          key={year}
          name="tax-year"
        >
          {year == 2019 ? "Yes" : "No"}
        </button>
      ))}
      <label htmlFor="filing-status">
        What was your filing status in your {taxYear} taxes?{" "}
      </label>
      {[SINGLE, MARRIED, HEADOFHOUSE].map((status) => (
        <button
          onClick={() => dispatch({ type: "filingStatus", payload: status })}
          className={status == filingStatus ? "selectedButton" : ""}
          name="filing-status"
          key={status}
        >
          {" "}
          {status}
        </button>
      ))}
      <br />
      <label htmlFor="adjusted-income">
        What was your adjusted gross income in {taxYear}?
      </label>
      ${" "}
      <input
        type="string"
        inputMode="numeric"
        pattern="[0-9]*"
        value={income}
        onChange={(e) => dispatch({ type: "income", payload: e.target.value })}
        min={0}
      />
      <br />
      <label htmlFor="children">
        How many children under age 17 did you claim as dependents in {taxYear}?
      </label>
      <input
        type="number"
        inputMode="numeric"
        pattern="[0-9]*"
        value={children}
        onChange={(e) =>
          dispatch({ type: "children", payload: e.target.value })
        }
        min={0}
        name="label"
      />
      <br />
      <button type="submit" className="calculateButton">
        Calculate
      </button>
      <p>
        {" "}
        {stimulusAmount >= 0 &&
          (stimulusAmount > 0
            ? `Your stimulus amount is likely to be ${new Intl.NumberFormat(
                "en-US",
                { style: "currency", currency: "USD" }
              ).format(stimulusAmount)}.`
            : `You are not expected to receive a stimulus.`)}
      </p>
      <br />
    </form>
  );
}

export default Form;