RxJS: Reactive If-Else Handling

RxJS is one of the tools that makes writing reactive JavaScript pure joy. Learn how to handle if-else branching with a cool Rx pattern and visualize it with Emoji!

Transcript

1. RxJS: Reactive If-Else Handling
2. Agenda Reactive programming What is RxJS? The if-else problem Reactive if-else pattern References
3. Reactive programming A programming paradigm concerned with data streams and change propagation. With this paradigm it is possible to express and manipulate dynamic (e.g. event emitters) or static (e.g. arrays) data streams.
4. Reactive programming class LightSwitch { lightBulb; flipSwitchOn() { this.lightBulb.power(true); } }
5. Reactive programming class LightBulb { constructor(lightSwitch) { lightSwitch.subscribe(on => this.power(on)); } }
6. Reactive programming class LightBulb { constructor(lightSwitch) { lightSwitch.subscribe(on => this.power(on)); } }
7. Reactive programming Publisher / Subscriber design pattern reflects the concept. PUBLISHER SUBSCRIBER
8. What is RxJS? Reactive Extensions for JavaScript is a library for transforming, composing, and querying streams of data. See: https://rxjs-dev.firebaseapp.com/
9. What is RxJS?
10. What is RxJS? const { of } = Rx; const numbers = of(1, 2, 3); numbers.subscribe(num => console.log(num)) OBSERVABLE SUBSCRIBER 3 2 1
11. const calls = [ { who: 'boss' }, { who: 'spouse' }, { who: 'unknown' }, { who: 'mum' }, ... ]; const phoneCalls = zip( interval(1000), from(calls) ).pipe(map(([_, call]) => call)); CODE!
12. The if-else problem MAPPING OBSERVABLE SUBSCRIBER map(({ who }) => { if (who === ‘mum’) return ‘ ’; if (who === ‘boss’) return ‘ ’; ... else return ‘ ’; })
13. phoneCalls.pipe( map(({ who }) => { if (who === ‘mum’) return ‘ ’; if (who === ‘boss’) return ‘ ’; if (who === ‘spouse’) return ‘ ’; /** * * More response conditions here * */ else return ‘ ’; }) ); CODE!
14. phoneCalls.pipe( tap(({ who }) => { if (who === ‘mum’) doSomething(); ... else doSomethingElse(); }), map(({ who }) => { if (who === ‘mum’) return ‘ ’; ... else return ‘ ’; }) ); CODE!
15. phoneCalls.pipe( tap(({ who }) => { if (who === ‘mum’) doSomething(); ... else doSomethignElse(); }), map(({ who }) => { if (who === ‘mum’) return ‘ ’; ... else return ‘ ’; }) ); CODE!
16. Reactive if-else pattern MUM const mumResponder = phoneCalls.pipe( filter(({ who }) => who === ‘mum’), map(() => ‘ ’), tap(() => textBack(‘Yes mum...’)) );
17. Reactive if-else pattern MUM const mumResponder = phoneCalls.pipe( filter(({ who }) => who === ‘mum’), map(() => ‘ ’), tap(() => textBack(‘Yes mum...’)) ); BOSS const bossResponder = phoneCalls.pipe( filter(({ who }) => who === ‘boss’), map(() => ‘ ’) );
18. Reactive if-else pattern OBSERVABLE SUBSCRIBER SIDE EFFECTS MUM SPOUSE BOSS UNKNOWN
19. Reactive if-else pattern OBSERVABLE SUBSCRIBER const phoneResponder = merge( mumResponder, spouseResponder, bossResponder, unknownResponder );
20. References https://rxviz.com https://rxjs-dev.firebaseapp.com https://blog.rangle.io/rxjs-where-is-the-if-else-operator
21. Thank you. LinkedIn: /in/jakubbarczyk Twitter: @jakubbarczyk