How to compose reducers with dependent state · Issue #19 · ngrx/store · GitHub

  • We wonder whether you agree with us that the computed streams should also be members of the store.
  • select ( ‘ widgets ‘ ); let selection$ = store .
  • CombineLatest ( widgets$ , selection$ , ( widgets , selection ) => { // do something and return the “calculated” state return computeSelectedWidgets ( widgets , selection ); });
  • ); } // optionally add an action : selectWidget( widget ){ this .
  • select ( ‘ selection ‘ ); // selectedWidgets will be recalculated when either foos$ or bars$ emits a new value let selectedWidgets$ = Observable .

store – RxJS powered state management for Angular applications, inspired by Redux

@hmch17: How to compose reducers with dependent state

#ngrx #angularjs

i like the reselect type solution from the SO link. in Rx style, reselect can typically be implemented something like this:

//.select() will give you an Observable that calls “distinctUntilChanged()” internally, meaning they’ll only fire when the state actually changes. let widgets$ = store.select(‘widgets’); let selection$ = store.select(‘selection’); //selectedWidgets will be recalculated when either foos$ or bars$ emits a new value let selectedWidgets$ = Observable.combineLatest(widgets$, selection$, (widgets, selection) => { //do something here and return the “calculated” state return computeSelectedWidgets(widgets, selection); });

and

zip()

all allow this sort of reselect functionality with various behaviors.

In an Angular2 app, i’d probably implement a service for this, and expose

as a property on that service:

@Injectable() class WidgetService { selectedWidgets: Observable constructor(store : Store){ this.selectedWidgets = Observable .combineLatest( store.select(‘widgets’), store.select(‘selection’), (widgets, selection) => this.computeSelectedWidgets(widgets, selection)); } private computeSelectedWidgets(widgets, selection){ return widgets.filter(…); } //optionally add an action here: selectWidget(widget){ this.store.dispatch({type: SELECT_WIDGET, payload: widget }); } }

This maintains the single state, and merely keeps a computed state in the service.

@robwormald, me and @tsoposki dig this approach.

However, we wonder whether you agree with us that the computed streams should also be members of the store. That way, as far as the view(component) is considered, it would only care of what streams the store exposes, not worrying what is calculated and what is not. Also, not worrying what selector-services it needs to inject.

However, we wonder whether you agree with us that the computed streams should also be members of the store.

Not really, no 😀

Also, not worrying what selector-services it needs to inject.

This is probably where I differ philosophically from Redux a bit. “Services” are an Angular idiom, and have been from the beginning – I think in a large scale app, i’d probably avoid injecting

directly into any components, in the same way i’d avoid injecting Http directly, in favor of an API wrapper type service.

That’s obviously a personal preference, but it works well for me. We’ll see how things evolve 🙂

@tsoposki I’m very glad that you asked this question. I had similar question for myself and tried different solutions. I came up with something similar to what @robwormald already described in his answer:

https://github.com/SekibOmazic/ngrx-auth-example (very much WIP)

OK, to be fair, I’ve got a lot of answers/ideas in Gitter channels ngrx/store and angular. The only thing I personally do not like is the huge switch in each reducer.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

How to compose reducers with dependent state · Issue #19 · ngrx/store · GitHub