[23.01.02] Reducer

useState처럼 상태를 업데이트하는 또 다른 방법

컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다

다른 파일에서 작성한 뒤에 불러올 수 있다는 장점

reducer : state, action을 파라미터로 받아서 새로운 상태를 반환해주는 함수

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState; // 새로운 상태 반환
}

• action : 업데이트를 하기 위한 정보, 형태는 자유 (보통 type 넣어줌)

useReducer

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

• state : 앞으로 컴포넌트에서 사용할 수 있는 상태
• dispatch : 액션을 발생시키는 함수 reducer 함수 실행 컴포넌트 내에서 state를 업데이트하기 위해 사용하는 함수
  
• reducer : 컴포넌트 외부에서 state 업데이트 새로운 state 반환
  
• initialState : 초기 state
• init : 초기 함수

dispatch

• reducer 함수 실행
• action 객체를 인자로 받음

  <button onClick={() => dispatch({type: "INCREMENT"})}>증가</button>

• action을 이용해서 컴포넌트 내의 state를 업데이트

reducer

• dispatch 함수에 의해서 실행

• 컴포넌트 외부에서 state를 업데이트하는 로직 담당

• 함수의 인자 : state, action

• 새로운 state 반환

  function reducer(state, action) {
    switch (action.type) {
      case "INCREMENT":
        return { count: state.count + 1 };
      case "DECREMENT":
        return { count: state.count - 1 };
      default:
        throw new Error("unsupported action type: ", action.type);
    }
  }