Web Study

리덕스 사용을 위한.. useReducer 개념

쿠리의일상 2023. 4. 7. 23:59

컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 기능

 

reducer 

현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수를 지칭

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

리듀서에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다.

  • action 은 업데이트를 위한 정보
  • type 은 객체 형식이지만 정해진 규칙은 없음 - 관습상 대문자와 _로 구성

 

useReducer

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

state 는 컴포넌트에서 사용할 수 있는 상태

dispatch 는 액션을 발생시키는 함수 ---> dispatch({ type : '~~~' }) 처럼 사용

 

useReducer() 의 첫번째 파라미터는 reducer 함수이고 두번째 파라미터는 초기 state 값이다.