Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ngrx - chain two store.select slices

Tags:

angular

rxjs

ngrx

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!

like image 357
Han Che Avatar asked Nov 13 '17 16:11

Han Che


People also ask

Can we have multiple stores in NgRx?

The objective of this article is to provide a technical implementation of the NGRX for an application with a complexity that could benefit from adding feature store(s) in addition to the root store.

Are NgRx selectors Memoized?

Benefits of using selectors There is a number of benefits: Memoization. First of all, selectors created by createSelector are memoized, meaning that they won't be called unnecessarily unless the data in the store has changed.

What is createFeatureSelector?

The createFeatureSelector is a convenience method for returning a top level feature state. It returns a typed selector function for a feature slice of state.


2 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)))
like image 143
Sebastian Hernandez Avatar answered Oct 28 '22 23:10

Sebastian Hernandez


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))
    );
like image 32
bryan60 Avatar answered Oct 29 '22 00:10

bryan60