Observing changes in component

[Nighthawk14]

Hi all, I'd like some implementation advices please :).

So let's say that I have this basic implementation:

constructor($ngRedux, $scope) {
    let unsubscribe = $ngRedux.connect(this.mapThisToState)(this);

    $scope.$on('$destroy', unsubscribe);
  }

  mapThisToState(state) {
    return {
      error: state.error
    };
  }

How can I do to watch for changes on the error object from the state. I know that the mapThisToState method is triggered every time the state changes but is it a good practice to add logic in it like:

mapThisToState(state) {
    if(state.error === 'error') { this.doSomeStuff(); }
    return {
      error: state.error
    };
  }

Thanks!

[wbuchwalter]

Your controller should pretty much only handle display logic.
If doSomeStuff() is only affecting the UI, then it's ok, but it would be cleaner if you just handled it with an angular directive if possible (ng-if etc.).

But most likely, this.doSomeStuff() is actually triggering a new action.
In that case, that's a bad practice. You should avoid having an action (in this case, the action that modified state.error) flowing all the way to the controller, to then immediately trigger another one. This makes the flow of your application much harder to debug.
Assuming that's what you are doing, you should handle this kind of logic in the action creator.

Closing, let me know if that doesn't answer your question.

[mbret]

Hello, it's not a good practice to add any logic (except binding logic) inside the mapThisToState in the React / Redux world. Unfortunatly ng-redux connect does not support angular core $onChanges which does not let you a lot possibilities. Considering this you may either use mapThisToState or the store api to subscribe. I would prefer the second option as it let your mapThisToState clean of logic.

[adamjaffeback]

Update: with #171, you could pass a function as the target of the connection function.

constructor($ngRedux, $scope) {
  // pass mergeToTarget instead of `this` in second function call
  let unsubscribe = $ngRedux.connect(this.mapThisToState)(this.mergeToTarget);
  $scope.$on('$destroy', unsubscribe);
}

mapThisToState(state) {
  return {
    error: state.error
  };
}

mergeToTarget(nextState, actions) {
  // watch for change, comparing current and next state
  if(this.error !== 'error' && nextState.error === 'error') {
    this.doSomeStuff();
  }
  // merge state and actions onto controller
  Object.assign(this, nextState);
  Object.assign(this, actions);   
}