web-dev-qa-db-fra.com

ngrx - chaîne de deux tranches store.select

Dans mon Todo Cmp j'ai ce code

this.todoListGroup$ = this.ngrx.select(fromRoot.getTodos)
    .flatMap((todos: Todo[]) => {
        console.log(todos)
        this.todos = todos
        this.ngrx.select(fromRoot.getLastChangedTodo);
    })
    .map(lastTodo =>{{
        console.log(lastTodo)
        doSomething(this.todos, lastTodo)
    })

Lorsque je m'abonne, je reçois un autre fichier console.log (lastTodo) à chaque fois. Je pense qu'avec flatmap et ngrx.select, je souscris à un nouvel Observable à chaque fois?

avec quel opérateur puis-je chaîner deux tranches de magasin?

MODIFIER:

Tant que la vue est dans le DOM, je veux rester abonné à todoListGroup $ car il doit continuer à mettre à jour ma vue.

Ma solution jusqu'ici consiste à définir une nouvelle tranche dans le réducteur qui renvoie les deux propriétés souhaitées. Cependant, je suis toujours intéressé par l'opérateur qui peut effectivement chaîner des tranches de propriété unique Ngrx.

Merci!

angularrxjsngrx
5
Han Che

Est-ce que quelque chose comme ce travail:

this.todoListGroup$ =
    Observable.combineLatest(
        this.ngrx.select(fromRoot.getTodos), 
        this.ngrx.select(fromRoot.getLastChangedTodo)
    )
    .do(([todos, lastToDo]) => console.log(todos, lastToDo));

La do serait exécutée à chaque fois que l'un ou l'autre de getTodos ou getLastChangedTodo est mis à jour et prendrait les dernières valeurs connues de chacune d'elles au moment de la mise à jour. La mise en garde ici est le ordre du moment où chacune de ces mises à jour est déclenchée peut ne pas toujours être la même. Donc, si vous voulez plus d'une mise à jour chaînée (ou en cascade), vous pouvez faire ceci:

this.todoListGroup$ =
    this.ngrx.select(fromRoot.getTodos)
    .withLatestFrom(this.ngrx.select(fromRoot.getLastChangedTodo))
    .do(([todos, lastToDo]) => console.log(todos, lastToDo));

Cela sera exécuté à chaque fois que getToDos est mis à jour et prendrait la dernière valeur de getLastChangedTodo. D'où l'idiome mis à jour chaîné (ou en cascade).

5
bryan60

Ceci est une approche pour la version 6.0 de RxJs.

Commencez par importer les opérateurs et la fonction Observable comme ceci:

import { Observable, combineLatest } from 'rxjs';
import { tap } from 'rxjs/operators';

Ensuite, vous pouvez les utiliser comme ceci:

combineLatest(
      this.store.pipe(select('users', 'userList')),
      this.store.pipe(select('users', 'accountsList')),
).pipe(tap(([userList, accountsList]) => console.log(userList, accountsList)))
8
Sebastian Hernandez

Essaye ça:

this.todoListGroup$ = this.ngrx.select(fromRoot.getTodos)
.flatMap((todos: Todo[]) => {
    console.log(todos)
    this.todos = todos
    this.ngrx.select(fromRoot.getLastChangedTodo);
})
.take(1)
.map(lastTodo =>{{
    console.log(lastTodo)
    doSomething(this.todos, lastTodo)
})
0
pioro90