(Disclaimer: demonstrated using rxjs version 5 on Angular 5 but I guess the idea is similar for version 6 as well, just the api was changed.)

I tried to gather some practical techniques IMO which are used when developing reactively in Angular.

The “promiseAll” alternative of observables :

updateSomething$(something: Something[]): Observable<Something[]{

const requests = something.map(thingy => this.http.put(`/something/${thingy.id}`, thingy)

.catch(err => Observable.of({err: err, reason: thingy.message})));

return forkJoin(requests);

}

Explanation:

Composed a list of api calls (observables) for updating something by its id.

In case of failure — catch the failure and return an observable with the reason.

The function returns the forkJoin operator passing the list of requests. (whoever uses the function could subscribe to it to get the forkjoined result)

forkJoin will wait until the last observable completes, and then it will produce a single value of the latest results.

If I wouldn’t catch the error and handled it by returning an observable in order to continue, I would lose the previous observable values.

2. The return ‘thenable’ function (function which returns promise) alternative:

SaveOrCancel$() {

return this.service.someObsFn().map(result => result ? followingObsFn : Observable.of(result));

}

Lets say I have a function which returns an observable to subscribe to (e.g. modal instance which you resolve from, clicking ‘ok’ will stream true, cancel will stream false) and I want to run another function which returns an observable from its subscription, (e.g. the user clicked ok to resolve the action) I’ll then use the map operator to stream the ‘next’ value and will return the next reactive function that I wish to return (meaning an observable with the result of the function which ran when the user clicked ‘ok’ to resolve).

The beauty here (in different to working with promises) is that if I’ll keep a subscription reference to the returnObsFromSubscription$ function, I could unsubscribe from it whenever I’ll want to!

4. The combineLatest operator — totally reactive — no promise term alternative

this.combinedSubscriptions$ = combineLatest(

this.store.select('a'),

this.store.select('b').map(b => b.name),

this.route.params)

.subscribe(retValues => {

console.log(`a: ${retValues[0].something} b: ${retValues[1]} routeParam: ${retValues}`);

Explanation

combineLatest will return the ‘aggregated’ result once each observable produced a value, it won’t wait for completion such as the forkJoin, meaning in case the ‘a’ store will be updated — the printed result will contain the last values of the ‘b’ and routeParam :)

5. The BehaviorSubject

Using the BehaviorSubject allows you to share states between different areas of the application in a quick way but could also easily get messy (hard to maintain) and not always needed when managing a shareable state of the app in a redux pattern using rxjs store.

In the following example I used it for setting a pure UI state from several areas in the application and I choose to use it instead of using a store to avoid subscribing the store from components which I didn’t want them to subscribe to it and avoid importing the store itself as a dependency and the action type plus I aimed for the most minor change and easy to test solution so it was a good fit.

@Injectable()

export class ToggleSliderEditModeService {



private isSliderOnEdit = new BehaviorSubject<boolean>(false);



setIsEdit(isEdit: boolean) {

this.isSliderOnEdit.next(isEdit);

}

isSliderOnEditMode() {

return this.isSliderOnEdit.asObservable();

}

}

That’s it for now, rxjs is really amazing lib and piping streams is fun.. don’t forget to unsubscribe :P