[React Hooks] use Reducter 메모

데뷔🙋‍♂️
최근에는 Redux Toolkit이 개발되었습니다.
순수한 레드ux보다 좀 더 간략하게 기술할 수 있어 편리하다.

useReducter에서의 상태 관리

React를 배울 때, 상태 관리는 항상useState를 사용한다

use Reducter는 무엇입니까?

왜 두 개의 파라미터를 얻었습니까?

디스패치는 무엇을 합니까?

usestate만 아니면 안 되나요?

이런 느낌이야.현재 React의 상태 관리 방법은 여러 가지가 있는데, 이번에는 use Reducter의 사용 방법을 지금까지 간단하게 비망록을 적어 두자.

원래 use Reducter라고 했어요.🤔

useReducer는useState의 대체품으로 사용할 수 있습니다.따라서 useState만 있어도 응용 프로그램 등의 동작을 할 수 있다.use Reducter를 사용하는 것이 좋습니다. 복잡한 state 논리가 있을 때입니다.

전역 코드

먼저 설명된 전체 코드와 파일의 구조를 보여 드리겠습니다.
create-react-app 명령제를 전제로 합니다.

파일 구조

src
　|- App.js<-이번 작업 파일
　|- index.js
　|- reducer
　　　|- reducer.js<-이번 작업 파일

코드

App.js

import { useReducer } from "react";
import { initialState, reducer } from "./reducer/reducer";

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const ChangeStatus = () => [
    dispatch({
      type: "CHANGE_STATUS",
      payload: !state.status
    })
  ];

  const ChangeName = (e) => {
    dispatch({
      type: "CHANGE_NAME",
      payload: e.target.value
    });
  };

  const ChangeAge = (e) => {
    dispatch({
      type: "CHANGE_AGE",
      payload: e.target.value
    });
  };

  return (
    <div className="App">
      <ul>
        <li>status: {state.status ? "True" : "False"}</li>
        <li>user.name: {state.user.name || "No userName"}</li>
        <li>user.age: {state.user.age}</li>
      </ul>
      <form>
        <div>
          <label>ステータス:</label>
          <input
            type="checkbox"
            checked={state.status}
            onChange={ChangeStatus}
          />
        </div>
        <div>
          <label>名前:</label>
          <input value={state.user.name} onChange={ChangeName} />
        </div>
        <div>
          <label>年齢:</label>
          <input type="number" value={state.user.age} onChange={ChangeAge} />
        </div>
      </form>
    </div>
  );
}

reducer.js

export const initialState = {
  status: true,
  user: {
    name: "",
    age: 0
  }
};

export const reducer = (state, action) => {
  switch (action.type) {
    case "CHANGE_STATUS":
      return {
        ...state,
        status: action.payload
      };
    case "CHANGE_NAME":
      return {
        ...state,
        user: {
          ...state.user,
          name: action.payload
        }
      };
    case "CHANGE_AGE":
      return {
        ...state,
        user: {
          ...state.user,
          age: action.payload
        }
      };
    default:
      return state;
  }
};

Codesandbox

해설

우선 useReducter는 두 개의 매개 변수입니다.

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

reducer

reducter가 특정한 동작에 대한state를 어떻게 변경하는지 설정합니다.

매개 변수에서state와action 두 개의 매개 변수를 찾습니다.

initialState

useState와 같이 초기 값을 설정합니다.
이번에는 Reducter가 적힌 파일과 함께 썼습니다.

상태 참조 방법

useReducter에 정의된 state에서 값을 참조합니다.

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

return (
  <div>
    {state.status} {/* 初期値のstatusの値を参照しています */}
  </div>
)

상태 수정 방법

dispatch를 사용하여 Reducter에 액션을 보내서 상태를 변경합니다.
대상에 type과payload를 정의합니다.액션입니다.
정의된 디스패치의 이벤트는use State와 마찬가지로 onChage 등을 사용하여 Reducter에게 액션을 보냅니다.
액션type에 정의된 내용에 따라 Reducter에서 기술한 변경을 진행합니다.
action.type이 "CHANGE NAME"인 경우 user입니다.name 을 변경합니다.
또한 현재 상태 값을 연 후 수정 내용을 덮어쓸 수 있는 오프라인 문법을 사용할 수 있습니다.

const ChangeName = (e) => {
  dispatch({
    type: "CHANGE_NAME",
    payload: e.target.value
  });
};

action.type 타자 오류 방지

이번 샘플 코드는 기술하지 않았습니다, 액션.다음 type을 정의하면 타자가 잘못되어도 오류로 알려 줍니다.
reducer.js

export const reducer = (state, action) => {
  switch (action.type) {
    case "CHANGE_NAME":
      return {
        ...state,
        user: {
          ...state.user,
          name: action.payload
        }
      };
    default:
      return state;
  }
};

App.jsx

export const CHANGE_NAME = "CHANGE_NAME";

간단한 비망록입니다.읽어주셔서 감사합니다.🙇‍♂️