State 관리

State : 

UI State	spinner의 작동 시기 및 Loading 데이터.
Temporary / Local State	Service의 List와 같은 데이터.
Persistent State	Storage 혹은 Database와 같은 자료

 

RxJS의 Subject를 이용한 UI State 관리

Http로 데이터를 로딩하는 동안 Spinner를 작동하는 예제로 설명하겠습니다.

 

Http - Async Data를 로딩 합니다. (delay를 사용했습니다.)

최신의 데이터를 받아서 UI의 랜더링을 할 수 있도록 State를 관리합니다.

 

  //service.ts
  
  import { BehaviorSubject } from 'rxjs';
    // BehaviorSubject<제네릭>(초기값)으로 Subject로 객체를 주입합니다.
  private _places = new BehaviorSubject<Place[]> ([
    new Place(), new Place()
  ]);

    // Observable로 리스트를 보냅니다. 가장 최신의 async값을 보내기 위함입니다.
  get places() {
    return this._places.asObservable();
  }
  
  import { take, tap, delay } from 'rxjs/operators';
  /* Observable을 반환 하는 take, delay, tap  operator입니다.
     tap: 
     탭은 3가지의 경우에 쓰일 수 있습니다.
     nextOrObserver: Observable이 실행 될 경우.
     error: 에러가 발생한 경우.
     complete: 완료된 경우.
  */ 
  addPlace() {
    const newPlace = new Place(); //Place를 생성하는 값들을 제거한 버전입니다.
      // pipe operator들을 연속해서 사용할 수 있도록 합니다.
    return this.places.pipe(
        //가장 최근의 값만 가져와 처리합니다.
      take(1), 
        //Http의 로딩을 해야하지만, 코드가 길어지므로 대체. 시간을 1초로 합니다.
      delay(1000), 
        //해당 매쏘드에서 consume하지 않고 return합니다.
      tap(places => {
          // BehaviorSubject.next() 실행할 작업을 기입합니다.
        this._places.next(places.concat(newPlace)); // 해당 리스트에 newPlace를 추가합니다.
      })
    );
  }

// page.ts

  isLoading = false;

  import { LoadingController } from '@ionic/angular';
    // 로딩시 spinner를 작동할 수 있도록 LoadingContorller 사용.
  constructor(private loadingCtrl: LoadingController) {}
  
  onCreateOffer() {
    this.loadingCtrl
      .create({
        message: 'Creating place...' // 스피너와 함께 나올 문구
      })
      .then(loadingEl => {
        loadingEl.present(); // 스피너를 UI에 표시.
        this.placesService
            // 위에서 구현한 매쏘드
          .addPlace()
            // next()를 구독(subscribe)
          .subscribe(() => { 
            loadingEl.dismiss(); // UI에서 스피너 제거.
          });
      });
  }
  

 

번외.

ionic의 lifeCycle을 관리해주어야 합니다.

ngOnInit() 의 경우 angular가 관리를 해주지만, Subject는 사용자가

ngOnDestroy()를 해주어야 합니다.

//page.ts

import { Subscription } from 'rxjs';
  // Subscription을 주입합니다.
private placeSub: Subscription;

  매쏘드() {
    this.placeSub = this.placesService
        .addPlace()
        .subscribe(
          ... // 여러 작업 수행
        });
    });
  }
  
  ngOnDestroy() {
    if (this.placeSub) {
      this.placeSub.unsubscribe();
    }
  }