사용자 인터페이스 구성 요소의 상태 주도 개발

간소화해야 하는 사용자 인터페이스의 상태를 설명하는 코드를 자주 봅니다.

사용자 목록을 출력하는 코드를 살펴보겠습니다.

  <ng-container *ngIf="isLoading && !error">Loading...</ng-container>
  <ul *ngIf="users && users.length && !error">
    <li *ngFor="let user of users">{{user.name}}</li>
  </ul>
  <ng-container *ngIf="!error && !loading && users && !users.length">Nothing found</ng-container>
  <ng-container *ngIf="!isLoading && error">{{error.message}}</ng-container>

이 코드는 끔찍합니다. 읽고 유지하기가 어렵습니다.
나는 다른 방법을 선호합니다. 나는 유한 상태 기계 이론에 대해 읽곤 했습니다. 상태 머신은 유한한 상태 집합을 가지며 매 순간 이러한 상태 중 하나에 있습니다.

사용자 목록에는 네 가지 상태가 있습니다.

로드 중

사용자 로드됨

사용자가 오류와 함께 로드되었습니다

.

사용자가 설립되지 않았습니다

.

차별된 합집합이 있는 상태를 설명하겠습니다.

type State =
  | { status: 'loading' }
  | { status: 'success', data: IUser[] }
  | { status: 'failed', error: Error }
  | { status: 'not-founded' }

뷰 로직을 다시 작성해 봅시다.

  <ng-container *ngIf="state.status === 'loading'">Loading...</ng-container>
  <ul *ngIf="state.status === 'success'">
    <li *ngFor="let user of state.data">{{user.name}}</li>
  </ul>
  <ng-container *ngIf="state.status === 'not-found'">Nothing found</ng-container>
  <ng-container *ngIf="state.status === 'failed'">{{state.error.message}}</ng-container>

제네릭을 사용하여 상태 유형을 범용으로 만들 수 있습니다.

type State<TSuccessData> =
  | { status: 'loading' }
  | { status: 'success', data: TSuccessData }
  | { status: 'failed', error: Error }
  | { status: 'not-founded' }
type UsersListState = State<IUser[]>;

이 코드는 더 읽기 쉽고 자체 문서화됩니다. 현재 IDE에서 더 나은 힌트를 제공합니다.


당신의 팀은 당신에게 감사할 것입니다.

추신 내 영어 죄송합니다. 그것은 영어로 된 나의 첫 번째 기사입니다.