CombineReducers

윤서영·2024년 6월 10일

Frontend

목록 보기
4/7
post-thumbnail

combineReducers를 사용하는 이유
Redux에서 combineReducers 함수는 여러 개의 reducer 함수를 하나의 reducer 함수로 결합하는 데 사용됩니다.

  • 상태 조각 분리 관리: Redux에서는 상태를 여러 조각으로 분리하여 관리하는 것이 좋습니다. 각 상태 조각은 별도의 reducer 함수로 관리됩니다.
  • 단일 Store 유지: 여러 개의 reducer 함수를 사용하더라도 Redux Store는 하나만 존재
    -> 하나의 store에 여러 컴포넌트가 접근하기때문에 상태 일관성 유지
    -> 디버깅 용이
    -> reducer함수를 따로 모듈화 하여 코드 쉽고 간결

예시

const rootReducer = combineReducers({
  counter: counterReducer,
  todos: todoReducer,
});

export default rootReducer;

렌더링 최적화 방법 - useSelector

combineReducer 후 dispatch 호출 시 기본적으로
전체 store 가 다 렌더링 됨

-> useSelector로
Store에서 필요한 상태 데이터만 선택하여 컴포넌트에 제공. 컴포넌트는 선택된 상태 데이터에만 반응하여 다시 렌더링됩니다.

-> 그 이후 dispatch로 선택한 슬라이스의 값만 변경하면 불필요한 렌더링 줄이기 가능

profile
회사에서 감자가 되지 말자..!

0개의 댓글