Angular4 ChangeDetection OnPush and Redux - Performance

Question

I am trying to understand the implications of using a Redux style design approach when keeping an application's state synchronized. Specifically what the performance outcomes are when dealing with large amounts of data sets. Say we have a simple reducer like below that simply returns the state:

const reducer = (state:AppState, action:Action)=>{
  swtich(action.type) {
      case "ADD":
           return state
      default:
           return state
  }
}

Then In my top level component I subscribe to it:

@Component({...})
class AppComponent implements ngOnInit {
     propertyA:number;
     propertyB:number;
     constructor(private store:AppStore<AppState>) {}

      ngOnInit() {
          this.store.subscribe((data:AppData)=>{
               this.propertyA = data.propertyA;
               this.propertyB = data.propertyB;
           })
      }
}

And then the child component simply receives propertyA and propertyB via @Input

@Component({ changeDetection: ChangeDetectionStrategy.OnPush})
class Child {
   @Input() propertA:number;
   @Input() propertyB:number;

}

Now wouldn't this completely make the OnPush strategy redundent? Since a new state will always be returned by the root reducer which should also change the reference of the Input properties? Or am I not fully understanding how the OnPush strategy works? In the case above this is not a big deal, but what about larger data sets? With more 'branches'. Each action will always return a new state and trigger change detection on the entire component tree.

Now I understand I can subscribe to individual 'branches' of my state. But won't the root reducer always return the fully new state anways, which then triggers change detection?

wolverine wolverine · Accepted Answer · 2017-11-24T10:41:15

From redux.js.org

Common Redux misconception: you need to deeply clone the state. Reality: if something inside doesn't change, keep its reference the same!

Angular4 ChangeDetection OnPush and Redux - Performance

1 Answers