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
'Frontend > react' 카테고리의 다른 글
socket.io (react) (0) | 2024.02.24 |
---|---|
Redux 설치 및 사용법 (0) | 2023.09.27 |
react-router-dom 버전6 변경 사항 (0) | 2023.09.25 |
React Router Dom 설정(버전 5.x, 6링크) (0) | 2023.09.25 |
login 기능(front) (0) | 2022.09.04 |