angular array observable subscription not triggering

Question

I have an array of type Person my state.

export interface Person {
    name: string;
    age: number;
}

I have a component that contains an Observable of this state slice.

export class PassengersComponent implements OnInit {
    public passengers$: Observable<Person[]>;

    constructor(public store: Store<fromRoot.State>) { }
    ngOnInit() {
            this.passengers$ = this.store.select(fromStore.getPassengers);

            // subscribe to the observable to detect any changes
            this.passengers$.subscribe((data: Person[]) => {
                console.log('Subscription hit!'); //<--- NOT BEING HIT AFTER 1ST TIME
            });

    }
}

I push out the object array to the view simply.

<input type="number" *ngFor="let p of (passengers$ | async)" [ngModel]="p.age" (ngModelChange)="onPassengerAgeChange($event, p.name)">

The "onPassengerAgeChange()" event fires off, and my store gets updated successfully. I can verify this by adding:

{{ (passengers$ | async) | json }}

However for some reason, the subscription code in my component does not trigger when the store gets updated. What am I missing here?

Answer 1

I was incorrectly changing (mutating) the state of my Person[] array.

I had

{
    return state = action.payload;
}

where it should have been

{
    return state = [].concat(action.payload);
}