Korzystanie z konstruktora, aby wybrać się na magazynie i ngOnInit w celu wysyłki ze sklepu

Question

Moje pytanie dotyczy wysyłki & wybierając ze sklepu ngrx.

Spójrzmy na poniższy kod z oficjalnej aplikacji np:

export class CollectionPageComponent implements OnInit { 
    books$: Observable<Book[]>; 

    constructor(private store: Store<fromBooks.State>) { 
    this.books$ = store.select(fromBooks.getBookCollection); 
    } 

    ngOnInit() { 
    this.store.dispatch(new collection.Load()); 
    } 
} 

Chciałbym zrozumieć, co motywowane Wybór od ngOnInit wysyłający i Wybieranie z constructor.

Czy ktoś może podać wyjaśnienie?

P.S. Nawiasem mówiąc, powyższy kod przykładowy pochodzi z przykładowej aplikacji ngrx, którą można znaleźć tutaj: https://github.com/ngrx/platform/blob/master/example-app/app/books/containers/collection-page.ts

Answer 1

Głównym powodem, moim zdaniem, jest oddzielenie obaw. Konstruktor jest miejscem, w którym zdefiniowano wszystkie zależności. Tak więc w tym przypadku zdobycie sklepu, a nie wybierając jego kawałek.

Wysyłanie akcji jest częścią logiki, którą można oddzielić od zależności (jeśli to możliwe).

Pomyśl o klasie z wieloma zależnościami i mnóstwem działań. Pomaga to zachować rozróżnienie. Każdy, kto przeczyta klasę, zawsze może przyjrzeć się konstruktorowi, aby zobaczyć, jakie są zależności i nie jest obfuskowany za pomocą jakiejkolwiek innej logiki.

Answer 2

Konstruktor jest wykonywany, gdy klasa jest instancjonowana i zapewnia poprawną inicjalizację pól klasy. To tutaj Angular rozwiązuje dostawców, których możesz przekazać jako argumenty w swoim konstruktorze.

Hierarchia cyklu życia ngOnInit jest wywoływana po sprawdzeniu właściwości związanych z danymi po raz pierwszy (wejścia & wyjścia komponentu). Aby uzyskać bardziej szczegółowe wyjaśnienie, patrz this question.

Motywacją dla wybierając z ngrx sklepie w konstruktorze i wysyłającego z ngOnInit o ile dobrze rozumiem, jest to, że wybierając jest częścią inicjowanie ty klasy komponentów. Ponieważ this.books$ jest obserwowalny, ma sens zainicjować go w konstruktorze, aby był gotowy do użycia natychmiast po utworzeniu. Zakładając, że bookCollection.Load() emituje wartość do this.books$, chcesz, aby this.books$ było możliwym do zaobserwowania z tych książek przed wyemitowaniem ewentualnej wartości.

Ponieważ chcesz, aby te wartości były wysyłane do this.books$, ma to sens, aby wywoływać akcję w ngOnInit. W ten sposób można się upewnić, że zainicjowano this.books$.

This answer na podobne pytanie również może być pomocne.