combineReducers

combineReducers

Redux에서 제공하는 유틸리티 함수 중 하나로, 여러 개의 리듀서를 하나로 합치는 역할을 합니다. 이를 사용하면 Redux 스토어에 여러 개의 리듀서를 등록할 수 있으며, 각 리듀서는 서로 다른 부분 상태를 관리하게 됩니다. combineReducers를 사용하면 리덕스 애플리케이션의 상태를 모듈화하고 유지보수를 쉽게 할 수 있습니다.

 

combineReducers를 사용하지 않는 경우

// reducers.js

const initialStateA = {
  dataA: [],
};

const initialStateB = {
  dataB: {},
};

const reducerA = (state = initialStateA, action) => {
  // ...
};

const reducerB = (state = initialStateB, action) => {
  // ...
};

export { reducerA, reducerB };

 

combineReducers를 사용한 경우

// reducers.js

import { combineReducers } from 'redux';

const initialStateA = {
  dataA: [],
};

const initialStateB = {
  dataB: {},
};

const reducerA = (state = initialStateA, action) => {
  // ...
};

const reducerB = (state = initialStateB, action) => {
  // ...
};

const rootReducer = combineReducers({
  reducerA,
  reducerB,
});

export default rootReducer;

 

스토어

Redux 스토어(store)는 기본적으로 하나의 루트 리듀서(root reducer)만을 허용합니다. 

combineReducers를 사용하여 여러 개의 하위 리듀서를 결합하여 스토어에서는 rootReducer 하나로 가져와서 사용합니다.

// store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

 

어떤 리듀서를 쓰는지 구분하는 방법

스토어에서 여러 하위 리듀서를 묶어서 하나로 가져왔는데 어떤 하위 리듀서를 쓸지 구분하는 방법은 key입니다.

combineReducers를 사용할 때, 각 리듀서는 자신이 관리하는 상태의 키(key)를 정의할 수 있습니다. 이 키를 사용하여 액션을 어떤 리듀서가 처리해야 하는지 결정합니다.

예를 들어, 여러 개의 리듀서를 combineReducers로 합칠 때 각 리듀서는 다음과 같이 상태의 일부분을 관리하도록 지정할 수 있습니다

import { combineReducers } from 'redux';

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const userReducer = (state = null, action) => {
  switch (action.type) {
    case 'SET_USER':
      return action.payload;
    case 'LOGOUT_USER':
      return null;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  counter: counterReducer, // "counter" 키에 해당 리듀서를 할당
  user: userReducer,       // "user" 키에 해당 리듀서를 할당
});

export default rootReducer;

위의 코드에서 combineReducers로 묶인 리듀서 객체는 각 리듀서가 관리하는 상태의 키를 정의합니다. 예를 들어, counterReducer는 counter 키를, userReducer는 user 키를 관리합니다.

 

액션을 디스패치할 때, 액션 객체에 type 속성을 추가하여 어떤 액션인지 명시합니다. 따라서 각 리듀서는 액션의 type 속성을 기반으로 어떤 작업을 수행해야 할지 결정합니다. 예를 들어, 'INCREMENT' 액션이 디스패치되면 counterReducer가 counter 키에 대한 상태를 업데이트하고, 'SET_USER' 액션이 디스패치되면 userReducer가 user 키에 대한 상태를 업데이트합니다.

이렇게 combineReducers를 사용하면 각 리듀서가 자신이 관리하는 상태의 키를 알고 있으므로, 액션을 올바른 리듀서로 라우팅할 수 있습니다.

 

https://lunit.gitbook.io/redux-in-korean/recipes/structuringreducers/usingcombinereducers

combineReducers 사용하기 - Redux