[REACT] Reducer 여러 개 사용하기 (combineReducer)

우선 reducer는 state와 state를 변경할 함수를 담고있다. 한개의 store가 존재하고, store에는 한개의 reducer만 담을 수 있다.

여러개의 reducer가 필요할 경우 어떻게 할 지 생각해보았다.

const store1 = createStore(reducer1);
const store2 = createStore(reducer2);
const store3 = createStore(reducer3); 

//reducer.js
const initial = {
	state1: "",
	state2: "",
	state3: "",
};
   
const reducer = (currentState = initial, action) => {
	...
	...
	...
};
     
export default reducer;
  
   
 
//app.js
const state1 = useSelector(state => state.state1);
const state2 = useSelector(state => state.state2);
const state3 = useSelector(state => state.state3);

첫 번째 방식은 redux 디자인 패턴에 위배된다. store는 한 개만 있어야한다.
두 번째 방식은 되긴하지만 매번 불필요한 복사와 state 관리에 복잡함이 생길것이다.

이를 해결하기 위해 combineReducer 이 있다. 여러개의 reducer를 하나의 store에서 실행할 수 있도록 해준다.

1. 파일구조

• reducer
  • rootReducer.js
  • module
    • user.js (reducer임)
    • number.js (reducer임)

module이라는 폴더 안에 reducer를 모아두고, rootReducer.js에 reducer를 합쳐줄려고한다.

2. rootReducer 작성

import {user} from './module/user';
import number from './module/number';

const { combineReducers } = require('redux');

const rootReducer = combineReducers({
    user,
    number
});

export default rootReducer;

reducer 작성은 생략하겠다.

3. store 생성

const store = createStore(rootReducer);

createStore 안에 기존에는 한개의 reducer를 넣었지만, 아까 combineReducers 해준 객체를 넣어준다.

4. 확인해보기

const state = useSelector(state => state);
console.log(state);

이렇게 콘솔로 찍어보면,

잘 찍힌다.

끝!