Trying to create a shadow copy of pending changes using observables and ngrx has presented me with a puzzling issue:
export class SearchBoxContainerComponent {
filterSettings$: Observable<FilterSettings>;
filterChanges: {[key:string]: any};
filterChanges$: Subject<{[key:string]: any}>;
constructor(private store: Store<fromRoot.State>) {
this.filterChanges = {};
this.filterChanges$ = new Subject();
this.filterSettings$ = Observable.combineLatest(
store.let(fromRoot.getFilterSettings),
this.filterChanges$,
(filterSettings, filterChanges) => {
return Object.assign({}, filterSettings, filterChanges);
}
);
this.filterChanges$.subscribe(foo => {
console.log('filterChanges$: ', foo);
});
this.filterSettings$.subscribe(foo => {
console.log('filterSettings$: ', foo);
});
this.filterChanges$.next(this.filterChanges);
}
updateSetting(key, value) {
this.filterChanges = Object.assign({}, this.filterChanges, {[key]: value});
this.filterChanges$.next(this.filterChanges);
}
submitSearchbox() {
// TODO send ngrx action to really update the filterSettings
}
}
In this scenario, Observable.combineLatest is used instead of directly getting the observable from the ngrx store.
this.filterSettings$ = store.let(fromRoot.getFilterSettings);
The issue arises when the search box initially opens with all values set to null. Only after updating a value do they get populated. Using store.let directly seems to solve this problem.
An async pipe is utilized in the HTML like so:
<my-component [filterSettings]="filterSettings$ | async"></my-component>
However, it's within an *ngIf statement which means it only gets evaluated after the search box opens. My assumption is that the async pipe subscribes after all actions are completed, and without new events, it does not receive a value. But why does it work with store.let? Is that a different type of observable always returning a value?
The main question: What mistake am I making, as I feel like something is still missing... And as a bonus question: Is this approach suitable for creating shadow copies of data that can be cancelled or submitted?