NgRx를 사용한 상태 관리는 어떻게 동작하나요?

Question

Accepted Answer

**NgRx**는 Angular를 위한 Redux 영감의 상태 관리 라이브러리입니다. 애플리케이션 상태를 단일 불변 **store**에 중앙집중화하며, RxJS를 기반으로 한 엄격하고 예측 가능한 단방향 데이터 흐름을 갖습니다. ## 핵심 조각과 흐름 ```text 컴포넌트가 ACTION을 디스패치 → REDUCER가 새 상태를 생성 (순수 함수) → STORE가 업데이트 → SELECTOR가 상태를 읽음 → 컴포넌트가 다시 렌더링 (EFFECT는 HTTP 같은 부수 효과를 처리하고, 새 action을 디스패치) ``` ## Action — 무슨 일이 일어났는지 기술 ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## Reducer — 다음 상태를 계산하는 순수 함수 ```ts import { createReducer, on } from "@ngrx/store"; export const usersReducer = createReducer( initialState, on(loadUsers, state => ({ ...state, loading: true })), on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })), ); ``` Reducer는 **순수**합니다. 현재 상태와 action이 주어지면, 옛 것을 변형하지 않고 (불변하게) 완전히 새로운 상태 객체를 반환합니다. ## Effect — 부수 효과 처리 (HTTP 등) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // 데이터와 함께 success 디스패치 ) ) ) ); ``` Effect는 action을 수신하고, 비동기 작업(HTTP 같은)을 수행하며, 결과 action을 디스패치합니다. 부수 효과를 컴포넌트와 reducer 밖으로 유지합니다. ## Selector + 컴포넌트 사용 ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // 메모이즈됨 // 컴포넌트 users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## NgRx는 언제 가치가 있는가? ```text ✓ 많은 컴포넌트에 걸쳐 공유 상태가 많은 대규모 앱 ✓ 복잡한 상태 상호작용, 타임트래블 디버깅 / 엄격한 예측 가능성 필요 ✗ 소/중규모 앱 → 무거운 보일러플레이트; 서비스 + signal/BehaviorSubject가 더 단순 ``` (참고: NgRx는 보일러플레이트가 적은 더 가벼운 **SignalStore**와 **ComponentStore**도 제공합니다.) ## 왜 중요한가 NgRx는 Redux의 예측 가능하고, 중앙집중적이며, 단방향인 상태 관리를 Angular에 가져옵니다. 많은 컴포넌트가 복잡한 상태를 공유하고, 엄격한 추적성과 디버깅이 중요한 대규모 앱에 유용합니다. 그러나 상당한 보일러플레이트를 수반하므로, 핵심 판단은 *언제* 사용할지(대규모/복잡한 공유 상태)와 더 단순한 접근법(signal이나 `BehaviorSubject`를 가진 서비스)을 더 작은 앱에 쓸지를 가르는 것입니다. action→reducer→store→selector 흐름과 부수 효과를 위한 effect를 이해하는 것은 NgRx 코드베이스에서 작업하는 데 핵심입니다.