ngrx - chain two store.select slices

user_5342949 0
Viewed 20362

In my Todo Cmp I have this 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)
    })

When I subscribe to it I get one more console.log(lastTodo) each time todo changes. I figure that with flatmap and ngrx.select, I'm subscribing to a new Observable each time?

with which operator can I chain two store slices?

EDIT:

As long as the view is in the DOM, I want to stay subscribed to todoListGroup$ since it should keep updating my view.

My solution so far is to define a new slice in the reducer which returns the two desired properties. However, I'm still interested in which operator can effectively chain ngrx single property slices.

Thanks!

rxjs ngrx angular
3 Answers

This is an approach for RxJs v6+ using the combineLatest operator.

First import the operators and Observable function like this:

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

Then you can use them like this:

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

Would something like this work:

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

The do would execute each time either one of getTodos or getLastChangedTodo is updated and would take the latest known values from each of them at the time of the update. The caveat here is the order of when each of those updates are fired may not always be the same. So, if you wanted more of a chained (or cascaded) update then you could do this:

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

That will execute each time getToDos is updated and would take the latest value from getLastChangedTodo. Hence the chained (or cascaded) updated idiom.

edit for rxjs 5+ syntax:

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


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

Try this:

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)
})
user_25992550
Related