비동기 소스(Angular)

This series explores how we can keep our code declarative as we adapt our features to progressively higher levels of complexity.

레벨 5: 비동기 소스

색상 상태가 서버에서 온다면 어떨까요? Angular를 사용하면 서버 데이터로 선언적일 수 있으므로 서비스에서 favoriteColors$를 가질 수 있고 다음과 같이 액세스할 수 있습니다.

  favoriteColors$ = this.colorService.favoriteColors$;

이제 그걸로 무엇을 할까요?

해당 observable을 구독하는 경우 명령형 속성 할당을 포함하는 콜백 함수를 작성해야 합니다.

해당 데이터가 어느 시점에서 저장소의 일부가 되어야 한다면 observable은 저장소 선언의 일부여야 합니다. createStore에 대한 다른 매개변수는 어떻습니까?

export class ColorsComponent {
  // ...
  initialState = ['loading', 'loading', 'loading'];

  favoriteColors$ = this.colorService.fetch('favorite');
  favoriteStore = createStore(
    ['colors.favorite', this.initialState, this.adapter],
    this.favoriteColors$,
  );
  // ...
}

StackBlitz

우리의 상태 객체가 { loading: boolean; colors: string[] }와 같은 모양이고 Observable이 데이터를 colors 속성에 덤프하기를 원하면 어떻게 될까요? 어댑터에서 setColors 상태 변경을 정의하면 다음과 같이 해당 상태 변경을 observable에 연결할 수 있으면 좋을 것입니다.

  favoriteStore = createStore(
    ['colors.favorite', this.initialState, this.adapter],
    { setColors: this.favoriteColors$ },
  );

우리의 observable은 저장소와 독립적이므로 이론적으로 여러 저장소가 이에 반응할 수 있습니다. 따라서 Devtools에 대한 자체 독립 주석이 필요합니다.

  favoriteColors$ = this.colorService.fetch('favorite').pipe(
    toSource('[Favorite Colors] Received'),
  );

이벤트 로그의 단일 항목으로 [Favorite Colors] Received 로 표시되어야 하는 Devtools에서는 영향을 받는 모든 저장소의 상태 변경이 해당 단일 이벤트의 결과로 표시되어야 합니다.

상태 변경이 발생할 때마다 우리는 이와 같이 주석이 달린 관찰 가능한 소스에서 가져오기를 원합니다. 한 가지 가능한 예외는 DOM 이벤트입니다. DOM 이벤트는 사용자 상호 작용에서 발생하기 때문에 예외로 추적하기가 매우 쉽습니다. 그들은 이미 어딘가에 명령형 호출을 해야 합니다. 이전에 논의한 것처럼 명령형 호출이 하나만 있는 경우 실제로 이벤트의 전체 의미를 캡슐화합니다.

그러나 DOM 이벤트에 독립적으로 주석을 달아야 하는 경우도 있습니다. 그 다음 글입니다.

아, 그리고 HTTP 소스 observable이 언제 구독되는지 궁금하다면 스토어의 상태에 대한 구독이 스토어의 자체 데이터 소스로 전달되기를 원합니다. 소비자는 구독을 통해 원하는 데이터를 한 번만 요청하면 됩니다. 말 그대로 구독이라는 단어의 의미입니다. 데이터를 원하고 가져와야 합니다. 이것이 바로 RxJS의 아름다움, 설계 방식입니다. 우리가 이미 store.state$를 요청하고 있을 때 작업을 파견하거나 추가 항목을 호출하는 것은 store.state$가 데이터를 가져오는 위치에 대한 암묵적인 지식이 있는 불필요하고 필수적인 단계가 될 것입니다. 우리가 아는 한 스토어의 상태는 긴 일련의 HTTP 요청에서 나올 수 있지만 RxJS는 적절한 위치에서 해당 문제를 한 번만 선언할 수 있도록 합니다. 이것은 단순함을 좋아하는 모든 개발자에게 매우 바람직합니다. 다시 한 번 말하지만 StateAdapt만이 이를 달성할 수 있는 유일한 방법은 아닙니다. 2017년에 작성한 이 기사에서는 RxJS의 using 함수: Stop Using NgRx/Effects for That을 사용하여 NgRx에서 데이터 종속성을 래핑하는 방법을 설명합니다. 이 기사에서도 동일한 기술을 사용했습니다. . NGXS 프로젝트에서도 같은 일을 했습니다.