InfomediaLtd / angular2-redux

57 stars 12 forks source link

Document and add example for using "select" #14

Open rubyboy opened 8 years ago

rubyboy commented 8 years ago

Document (in README) and add example (in angular-redux-example?) for using the "select" observable technique Implementation done in this PR: https://github.com/InfomediaLtd/angular2-redux/pull/12

CC @micha149

rubyboy commented 8 years ago

Added example of using the new "select" in the angular-redux-example: Commit: https://github.com/InfomediaLtd/angular2-redux-example/commit/a6d7a0776e85f064da3df505673c0c5917adbe99

    private parts$ = null;
    private partsInCart$ = null;

    constructor(appStore:AppStore, partActions:PartActions, cartActions:CartActions) {
        this.parts$ = appStore.select("parts");
        this.partsInCart$ = appStore.select(partsInCartSelector);
micha149 commented 8 years ago

You could do something like passing the currentUser$ observable directly into the user component and let the component mark for change detection if the observable changes…

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
    this.data.subscribe(() => {
      this.cd.markForCheck(); // marks path
    })
  }

This is were working with observables really gives a benefit on performance… http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

micha149 commented 8 years ago

It would make sense to place all selector functions into separate files. So, you don't have to worry where to find your required data in the state. Just include the respective selector function and use it. A folder named selectors as a sibling to reducers would be a common place for such files.

rubyboy commented 8 years ago

Agree about separating selectors into files. Absolutely makes sense. Will do that tomorrow.

Re the change detection, I quite like the fact that the observable itself triggers change detection when data flows in and it's all internal to the mechanism. This way it's all handled nicely by Angular without boilerplate code.

One other issue I was looking at and didn't find a solution was the state that is used in functions. Look at the AdminComponent and how is uses the filmFilter. Any idea how to use this with a selector? (I can't simply use async because it uses the filter as a param to a function. Also, it is used as a toggle for UI text (on/off) ).

micha149 commented 8 years ago

Why not writing the value to a class property on update?

rubyboy commented 8 years ago

That's what it does right now, using a "subscribe" :)

micha149 commented 8 years ago

Yeah, that's what I meant. I didn't looked at the code since yesterday evening. But the night brought me no better solution 😄 I think this is not a bad solution. Why enforcing to use observables everywhere, also when it makes no sense?

rubyboy commented 8 years ago

You're right! :)