[Redux] reducer 여러개 사용하기 - combineReducers

이번 포스팅에서는 리덕스에서 여러개의 reducer를 사용해야 할때 활용할 수 있는 combineReducers에 관해 간단하게 정리하는 포스팅이다.

 

목차

• combineReducers 사용이유 
• combineReducers 사용법 

1. combineReducers 사용이유

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import rootReducer from './reducers';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

//reducer 할당
const store = createStore(rootReducer);

const render = () =>
  root.render(
    <React.StrictMode>
      <App store={store} />
    </React.StrictMode>
  );

render();

store.subscribe(render);

위 코드를 보면 store를 생성하면서 Action이 발생시 실제로 상태 값을 바꿔주는 reducer를 인자로 넣어주는데 한 개의 reducer 밖에 넣을수 없다. 하나의 reducer에 모든 Action과 로직을 다 넣을수도 있지만 그렇게 되면 추후 유지보수적인 측면에서 봤을때 매우 복잡하고 가독성이 안좋을 수 있다. 이때 combineReducers를 사용하여 각각의 reducer들을 하나로 합쳐줄 수 있다.

 

2. combineRedcuers 사용방법

import { combineReducers } from 'redux';
import counter from './counter';
import todo from './todo';

const rootReducer = combineReducers({
  counter,
  todo,
});

export default rootReducer;

위와 같이 redux에서 combineReducers를 import 한뒤 합쳐줄 reducer들을 combineReducers의 파라미터로 넣어주고 redux store를 생성하는 index.tsx에서는 createStrore의 인자로 rootReducer를 전달해주면 하나의 reducer를 사용하는 것처럼 정상적으로 동작하는 것을 확인할 수 있다.