Redux는 세 가지 핵심 원칙 위에 세워진 예측 가능한 state 컨테이너입니다: 단일 store, action을 통해서만 바뀌는 읽기 전용 state, 그리고 다음 state를 계산하는 순수 reducer. 데이터가 한 방향으로 흘러 변경을 추적할 수 있게 합니다.
1. Single source of truth — 앱 전체의 state가 하나의 store 객체에 존재
2. State is read-only — 절대 변경하지 않고, action을 DISPATCH하여 변경
3. 순수 reducer를 통한 변경 — (state, action) => newState, 부수 효과 없음
// STORE — 단일 state 트리를 보유
const store = configureStore({ reducer: rootReducer });
// ACTION — 무슨 일이 일어났는지 기술하는 일반 객체
const action = { type: "counter/incremented", payload: 1 };
// REDUCER — 순수 함수: state + action이 주어지면 NEW state 반환
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case "counter/incremented":
return { ...state, value: state.value + action.payload }; // 새 객체
default:
return state;
}
}
// DISPATCH — 변경을 유발하는 유일한 방법
store.dispatch(action);
// SELECT — state 읽기
store.getState().counter.value;
UI가 ACTION을 dispatch → REDUCER가 새 STATE를 계산 → STORE 갱신 →
구독한 컴포넌트가 리렌더링 → 사용자가 상호작용 → 다음 action을 dispatch
이 엄격한 단방향 흐름은 모든 state 변경이 순수 함수가 처리한 dispatch된 action의 결과임을 의미합니다 — 완전히 추적 가능합니다.
import { useSelector, useDispatch } from "react-redux";
function Counter() {
const count = useSelector(state => state.counter.value); // 읽기
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>{count}</button>; // 쓰기
}
예측 가능성 — 모든 변경이 명시적이고 로깅된 action
디버깅 용이 — 타임 트래블 디버깅, action 재생(Redux DevTools)
테스트 용이 — 순수 reducer는 단위 테스트가 매우 쉬움
(참고: 현대 Redux는 Redux Toolkit을 사용하며, 이러한 개념을 유지하면서 보일러플레이트를 극적으로 줄입니다.)
Redux의 핵심 개념 — 단일 store, action, 순수 reducer, 단방향 흐름 — 은 애플리케이션 state를 예측 가능하고 추적 가능하게 만들며, 이것이 대형 앱에서의 주된 가치입니다.
store/action/reducer/dispatch/select를 이해하는 것은 Redux를 사용하는 많은 코드베이스에 필수적이며, 그 원칙(immutable 갱신, 순수 reducer, 단방향 흐름)은 거의 모든 state 라이브러리에서 반복됩니다.
절충점은 보일러플레이트이며, Redux Toolkit이 이러한 기초를 보존하면서 이를 해결합니다.