Pertanyaan NgrxStore dan Angular - Gunakan pipa async secara besar-besaran atau berlangganan sekali saja di konstruktor


Saya mulai melihat Toko ngrx dan saya melihat kemudahan untuk menggunakan pipa asinkron Sudut. Pada saat yang sama saya tidak yakin apakah menggunakan pipa async Sudut secara besar-besaran adalah pilihan yang baik.

Saya membuat contoh sederhana. Mari kita berasumsi bahwa dalam template yang sama saya harus menunjukkan atribut yang berbeda dari suatu objek (misalnya Orang) yang diambil dari Store.

Sepotong kode template bisa

<div>{{(person$ | async).name}}</div>
<div>{{(person$ | async).address}}</div>
<div>{{(person$ | async).age}}</div>

sedangkan konstruktor kelas komponen akan memiliki

export class MyComponent {
  person$: Observable<Person>;

  constructor(
    private store: Store<ApplicationState>
  ) {
      this.person$ = this.store.select(stateToCurrentPersonSelector);
  }
.....
.....
}

Sejauh yang saya mengerti kode ini menyiratkan 3 langganan (dibuat dalam template via async pipe) ke Observable yang sama (person$).

Sebuah alternatif adalah mendefinisikan 1 properti (person) di MyComponent dan hanya memiliki 1 langganan (dalam konstruktor) yang mengisi properti, seperti

export class MyComponent {
  person: Person;

  constructor(
    private store: Store<ApplicationState>
  ) {
      this.store.select(stateToCurrentPersonSelector)
                .subscribe(person => this.person = person);
  }
.....
.....
}

sementara template menggunakan pengikatan properti standar (yaitu tanpa pipa async), seperti

<div>{{person.name}}</div>
<div>{{person.address}}</div>
<div>{{person.age}}</div>

SEKARANG PERTANYAAN

Apakah ada perbedaan dalam hal kinerja antara 2 pendekatan? Apakah penggunaan besar-besaran pipa async (yaitu penggunaan besar-besaran langganan) akan mempengaruhi efisiensi kode?

Terima kasih adalah muka untuk panduan apa pun


32
2018-01-17 21:56


asal


Jawaban:


Baik, Anda harus menulis aplikasi Anda sebagai komponen pintar dan presentasi.

Keuntungan:

  • Semua logika buissness pada smart controller.
  • Hanya satu berlangganan
  • Dapat digunakan kembali
  • Pengontrol presentasi hanya memiliki satu tanggung jawab, hanya untuk menyajikan data dan tidak tahu dari mana datanya berasal. (Hubungan renggang)

Menjawab pertanyaan terakhir:

Penggunaan besar-besaran pipa async akan mempengaruhi efisiensi, karena akan berlangganan ke setiap async pipe. Anda dapat melihat ini lebih banyak lagi jika Anda memanggil layanan http, karena akan memanggil permintaan http untuk setiap pipa asinkron.

Komponen Cerdas

@Component({
  selector: 'app-my',
  template: `
      <app-person [person]="person$ | async"></app-person>
`,
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

    person$: Observable<Person>;

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

    ngOnInit() {
        this.person$ = this.store.select(stateToCurrentPersonSelector);
    }

}

Komponen Presentasi

@Component({
  selector: 'app-person',
  template: `
    <div>{{person.name}}</div>
    <div>{{person.address}}</div>
    <div>{{person.age}}</div>
`,
  styleUrls: ['./my.component.css']
})
export class PersonComponent implements OnInit {

    @Input() person: Person;

    constructor() {}

    ngOnInit() {
    }

}

Untuk info lebih lanjut, periksa:


29
2018-01-17 23:26



Anda dapat menambahkan ".share ()" ke akhir deklarasi yang dapat diamati. Semua pipa asinkron Anda pada yang dapat diobservasi akan berbagi langganan yang sama:

this.name$ = Observable.create(observer => {
  console.log("Subscriber!", observer);
  return observer.next("john")
}).delay(2000).share();

this.httpget$ = http.get("https://api.github.com/").share();

Plunkr menunjukkan: https://embed.plnkr.co/HNuq1jUh3vyfR2IuIe4X/


9
2018-01-23 20:52



Kemungkinan lain adalah menggunakan konstruksi seperti ini:

<div *ngIf="person$ | async as per">
    <div>{{ per.name }}</div>
    <div>{{ per.address }}</div>
    <div>{{ per.age }}</div>
<div>

Meskipun untuk bit kode yang dapat digunakan kembali lebih baik untuk menggunakan metode komponen presentasi.

Harap dicatat ini bekerja di sudut 5, tidak yakin tentang versi lain.


5
2018-02-12 10:27