NgRx의 Selectors와 Effects

이 수업에서는 Angular에서 효율적인 상태 관리에 중요한 NgRx의 Selectors와 Effects를 다룹니다.

Selectors란 무엇인가요?

Selectors를 사용하면 Store에서 상태의 특정 부분을 효율적으로 가져와 데이터 접근을 최적화할 수 있습니다.

Selectors 만들기

createSelector() 함수를 사용하여 상태에서 데이터를 효율적으로 선택하세요:

export const selectUser = createSelector(
  (state: AppState) => state.user,
  (user) => user.details
);

컴포넌트에서 Selectors 사용하기

Selectors를 사용하면 컴포넌트에서 Store 데이터에 쉽게 접근할 수 있습니다:

this.store.select(selectUser).subscribe(user => console.log(user));

Effects란 무엇인가요?

Effects는 Actions를 수신하고 비동기 작업을 수행하여 HTTP 요청과 같은 NgRx의 부수 효과를 처리합니다.

Effects 설치하기

다음 명령을 사용하여 NgRx Effects를 설치하세요:

npm install @ngrx/effects --save

Effects 만들기

Effects는 Actions에 의해 트리거되는 HTTP 요청과 같은 부수 효과를 처리합니다:

loadUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUser),
    mergeMap(() => this.userService.getUser().pipe(
      map(user => loadUserSuccess({ user }))
    ))
  )
);

Effects 등록하기

애플리케이션에서 Effects를 활성화하려면 모듈에 등록하세요:

EffectsModule.forRoot([UserEffects])

요약

이제 NgRx의 Selectors와 Effects를 이해하셨으므로 상태와 부수 효과를 효율적으로 처리할 수 있습니다. 훌륭합니다!