비동기 작업을 위한 rxMethod

SignalStore의 비동기 처리

rxMethod 기초

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

rxMethod 호출하기

store.load('42');

신호 전달하기

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

switchMap으로 오래된 작업 취소하기

로딩 상태 추적하기

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

오류 처리

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

디바운스된 검색

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

평탄화 연산자 선택하기

자동 정리

생성 시 초기화하기

withHooks({
  onInit(store) { store.load('initial'); }
})

빠른 확인

복습