RXJSで角度でデータをキャッシュする方法

ときに我々のアプリを構築すると、メニューのようないくつかのデータは、オプションがfrecuencyで変更されません.ユーザーがarroundを移動するとき、ベスト・アプローチはそれをキャッシュすることになっています.
RXJSは私たちにキャッシュを構築し、それを格納する簡単な方法を提供し、2つの演算子は、魔法を発生させる共有とShareReplayデータを取得し、計算を避けるために避けてください.

例

私は2つのルートのホームとのホームアプリケーションをNBAの選手のリストも簡単なアプリを持って、我々はデータを彼の最初と2番目の名前を使用してFullNameを構築する処理します.
たびにユーザーがホームとバックを残して移動すると、それはデータを取得し、また、プロセスを実行する必要があります、それは計算のような大きなプロセスである必要があります.
私が周波数で変化しないならば、なぜ私は再びデータを得ていますか?キャッシュのための時間です.

ShareReplayを使用する

我々は、パフォーマンスと我々のアプリの応答を向上させる、各プレイヤーのビルドfullnameのプロセスを繰り返すことを避けるために、また、処理された時間を表示するプロセスの日付を持っている.
ShareReplayは我々のアプリのデータをキャッシュし、新しい加入者にデータを再生するのに役立ちます.

Read more about shareReplay

データの流れにShareReplay演算子を追加し、HTTPリクエストからデータを受け取り、HTTPリクエストの最後の発光を再生できるバッファーに入れます.

@Injectable()
export class NbaService {
  api = 'https://www.balldontlie.io/api/v1/';

  private teamUrl = this.api + 'players';
  public players$ = this.http.get<any[]>(this.teamUrl).pipe(
    map((value: any) => {
      return value?.data.map((player) => ({
        ...player,
        fullName: `${player.first_name} ${player.last_name}`,
        processed: new Date().toISOString(),
      }));
    }),
    shareReplay(1),
  );

  constructor(private http: HttpClient) {}
}

完璧なので、ページ内のデータを見ることができます、日付パイプの演算子を使用して処理された日付のより良い形式を持っている.

<ul *ngIf="players$ | async as players">
  <li *ngFor="let player of players">
    {{ player.fullName }} {{ player.processed | date: 'medium' }}
  </li>
</ul>

我々はページから他のアプリに移動し、ホームページに戻る場合は、キャッシュからデータを取得します.
Chromeのネットワークタブの詳細を見ることができます.
https://stackblitz.com/edit/angular-ivy-3vql5l?file=src/app/nba.service.ts
はい、そう簡単に、我々のアプリのキャッシュを持っている!しかし、どのように強制的に更新するには?

キャッシュを更新し、データを更新する

私たちのキャッシュは、魅力のように動作しているが、時にはユーザーが更新を強制し、どのように行うことができますか?rxjs私たちの生活は簡単!
我々は行動の対象は、ユーザーがデータを更新したいときにアクションに反応するために使用します.
最初に動作対象の型voidとnewメソッドupdatedata ()を作成してアクションを発行し、HTTPリクエストを格納する新しい変数apirequest $を作成します.
プレイヤー$ Objectableは、動作対象から値を取得し、演算子マージマップを使用してデータをパイプし、HTTPレスポンスをマージし、オブザーバブルを返します.

Read more about merge.

最終コードは次のようになります

@Injectable()
export class NbaService {
  private _playersData$ = new BehaviorSubject<void>(undefined);
  api = 'https://www.balldontlie.io/api/v1/';

  private teamUrl = this.api + 'players';
  apiRequest$ = this.http.get<any[]>(this.teamUrl).pipe(
    map((value: any) => {
      console.log('getting data from server');
      return value?.data.map((player) => ({
        ...player,
        fullName: `${player.first_name} ${
          player.last_name
        } ${Date.now().toFixed()}`,
      }));
    })
  );

  public players$ = this._playersData$.pipe(
    mergeMap(() => this.apiRequest$),
    shareReplay(1)
  );

  constructor(private http: HttpClient) {}

  updateData() {
    this._playersData$.next();
  }
}

ページで、新しいメソッドを呼び出して、サービスメソッドを呼び出してデータトリガーの更新を強制します.
パーフェクト!ここで最後のコードを見ることができます.
https://stackblitz.com/edit/angular-ivy-hbf6dc?file=src%2Fapp%2Fpages%2Fhome%2Fhome.component.css

回収する

我々は、キャッシュを作成することができますので、簡単にRXJSを使用して更新を強制するので、次の時間は、速度と応答性を向上させるように簡単です!
私は非常にいくつかのビデオを見ることをお勧めします、彼女は非常によくRXJSについてのすべてを説明し、どのようにデータを操作する.

Julia ZolotovaのUnsplashによる写真