[React] useReducer

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

const ACTIONS = {
  INCREMENT: "increament",
  DECREMENT: "decreament"
};

function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.INCREMENT:
      return {
        count: state.count + 1
      };

    case ACTIONS.DECREMENT:
      return {
        count: state.count - 1
      };

    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  function increament() {
    dispatch({ type: "increament" });
  }

  function decreament() {
    dispatch({ type: "decreamnet" });
  }

  return (
    <>
      <button onClick={decreament}> - </button>
      <span>{state.count}</span>
      <button onClick={increament}> + </button>
    </>
  );
}

 

 

함수를 여러개 만들필요없이 type으로만 나눠서 reducer 함수 하나로 state  관리가 가능해진다.

 

영상에서는 Todo list 를 수정 삭제 하는 예를 들었는데 이때는 해당 배열의 id값을 인자값으로 보내줘서 수정 삭제 기능을 구현하면 된다.

 

 

 

https://www.youtube.com/watch?v=kK_Wqx3RnHk 

보는 걸 추천한다.