web-dev-qa-db-ja.com

Ngrx 6.1.0-選択は非推奨です-新しい構文は何ですか？

次のngrx selectは非推奨です。

this.store.select(state => state.academy.academy).subscribe((academy) => {
    this.academy = academy;
});

これをstore.d.tsで見つけました

@deprecated from 6.1.0. Use the pipeable `select` operator instead.

だから...正しい構文は何ですか？

やってみる

this.store.pipe(select(state => state.academy.academy).subscribe((academy) => {
    this.academy = academy;
}))

エラー：名前 'select'が見つかりません。 「オンセレクト」という意味ですか？

ngrx
19
Michalis
import {Component, OnInit} from '@angular/core';
import {Store, select} from '@ngrx/store';
import {AppState} from '../../../../../app.state';

@Component({
   selector: 'app-layout',
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.scss']
})
export class PageLayoutComponent implements OnInit {

   academy;

   constructor(
      private store: Store<AppState>
   ) {
   }

   ngOnInit() {
      this.store.pipe(select((state: any) => state.academy.academy)).subscribe((academy) => {
         this.academy = academy;
      });
   }


}
32
Michalis

NgRx 7によれば、selectメソッドは非推奨ではありません。

詳細については、関連する Pull Request を参照してください。

10
timdeschryver

@Michalisが言及したように、@ngrx/storeからselectを取得するだけです。

セレクターを使用すると、アプリケーションの状態に応じた読み取りモデルを作成できます。 CQRSアーキテクチャパターンの観点から、NgRxは読み取りモデル（セレクター）を書き込みモデル（リデューサー）から分離します。高度な手法は、セレクターとRxJSパイプ可能演算子を組み合わせることです。

この機能は v5.0. で追加され、それ以来this.store.select()は廃止されました。ただし、リリースv6.1.0では同じことが通知されます。 Store<T>自体がObservable<T>を拡張するので、.subscribe()を使用して簡単にサブスクライブできる、または異なるパッチ演算子を使用して操作/変換できるobservableを返します。

RxJSは、pipable演算子と.pipe()を v5.5 に導入しました。再利用可能なパイプ可能な演算子を構築するために使用できるパイプユーティリティ関数もあります。リリースv5では、pipe() custom select演算子の助けを借りてビルドされます。これを確認してください link または基本的な例（空の状態を無視する）が下にあります。

import { select } from '@ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';

export const selectFilteredState = pipe(
  select('sliceOfState'),
  filter(state => state !== undefined)
);

store.pipe(selectFilteredState ).subscribe(/* .. */);
3
Hardik Pithva