Reducer + Context

Context와 reducer

두 도구를 함께 쓸 때는 전달 책임과 계산 책임을 분리해야 합니다. 컴포넌트는 action을 보내고, reducer는 이전 상태로 다음 상태를 계산합니다.

Provider

useReducer 결과를 공급

Provider는 `state`와 `dispatch`를 하위 트리에 제공하는 얇은 경계로 유지합니다.

Reducer

순수 함수로 상태 계산

API 호출, 알림, 라우팅 같은 부수 효과는 넣지 않고 새 상태 객체만 반환합니다.

Action

변경 의도를 문장처럼 표현

LOGIN, LOGOUT처럼 일어난 일을 명확히 남깁니다.

Test

UI 없이 규칙 검증

같은 상태와 action이면 항상 같은 다음 상태가 나옵니다.

이벤트클릭
전송dispatch
계산reducer
상태새 객체
화면렌더
Provider는 넓히되 얇게 공급 범위는 넓을 수 있지만 내부 로직은 단순해야 합니다.
Reducer는 예측 가능하게 동일한 입력에 동일한 출력을 반환해야 흐름 추적이 쉽습니다.
컴포넌트는 의도만 보내기 상태 변경 세부 규칙을 컴포넌트 안에 흩뿌리지 않습니다.

상태 공유 판별 Context와 reducer의 결합은 작은 Redux처럼 보이지만, 핵심은 전역화가 아니라 변경 규칙을 한곳에 모으는 데 있습니다.