NgRx 스토어 핵심

NgRx Store의 핵심

이 수업에서는 Angular 애플리케이션을 위한 강력한 상태 관리 솔루션인 NgRx를 소개합니다.

NgRx는 Redux에서 영감을 받았으며 Angular 애플리케이션의 상태를 중앙에서 관리하여 컴포넌트 간 데이터 처리를 간소화합니다.

• 중앙 집중식 상태 관리
• 명확하고 예측 가능한 데이터 흐름
• 더 쉬운 디버깅과 테스트

NgRx에는 다음과 같은 핵심 개념이 포함됩니다:

• Store: 애플리케이션 상태를 보관합니다
• Actions: 이벤트를 설명합니다
• Reducers: 상태 전환을 처리합니다
• Selectors: 상태 데이터를 가져옵니다

npm을 사용하여 NgRx를 설치하세요:

npm install @ngrx/store --save

애플리케이션 모듈에서 Store를 정의하세요:

StoreModule.forRoot({ appState: appReducer })

Actions는 애플리케이션의 이벤트를 정의합니다:

export const loadData = createAction('[App] Load Data');

Reducers는 Actions에 응답하고 새로운 상태를 생성하여 상태 변경을 처리합니다:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

요약

앱 상태를 효과적으로 관리하는 NgRx Store 사용의 핵심을 학습하셨습니다. 잘하셨습니다!