TodosList.ts

This file exports the final container component <TodosList/> . To connect our TodosListStore to the TodosListComponent, we need to do two things.

First, create an observable for all props that the component needs. We do this using a function called combineLatestObj, which is based off the RxJS function combineLatest. The combineLatest operator simply takes a list of observables and when any one of them changes it fires the subscriber with the latest values from all the observables as arguments.

// combineLatest Example

const observer1 = Observable.of('a');

const observer2 = Observable.of(1); combineLatest(

observer1,

observer2,

(value1, value2) => value1 + value2

)

.subscribe(combinedValue => console.log(combinedValue)); observer1.next('b');

observer2.next(2); // a1

// b1

// b2

Our function combineLatestObj is the same idea, but we want to give it a map of keys to observables and have it resolve the map of keys to latest values of each observable. It has an added feature of passing static values through so we don’t need to create observables for values that don’t change (like functions or constants defined outside the component).

NOTE: this can be composed to create nested objects as well

// combineLatestObj Example

const observer1 = Observable.of('a');

const observer2 = Observable.of(1);

const constantValue = 'no changes'; combineLatest({

value1: observer1,

value2: observer2,

constantValue

})

.subscribe(latestObject => console.log(latestObject)); observer1.next('b');

observer2.next(2); // { value1: a, value2: 1, constantValue: 'no changes' }

// { value1: b, value2: 1, constantValue: 'no changes' }

// { value1: b, value2: 2, constantValue: 'no changes' }

With combineLatestObj it is easy to create a single observable that satisfies the TodosListComponentProps with the todosListStore and is strongly typed:

combineLatestObj<TodosListComponentProps>(todosListStore);

Second we need to connect our new observable to the TodosListComponent to create a container, just like you would with the react-redux connect higher order component. To do this we have a similar higher order component called withObservable that will subscribe to the given observable and any time there is an update, the value of the observable (and nothing else) will be passed to the given component. The function is used like any other higher order component and provides strong typing to ensure the observable and component both satisfy the given interface:

withObservable<TodosListComponentProps>(TodosListObservable)(TodosListComponent);

Now exporting our container is as simple as exporting the result of these two steps: