RxJS: Reactive If-Else Handling 

Agenda Reactive programming What is RxJS? The if-else problem Reactive if-else pattern References 

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. 

Reactive programming class LightSwitch { lightBulb; flipSwitchOn() { this.lightBulb.power(true); } } 

Reactive programming class LightBulb { constructor(lightSwitch) { lightSwitch.subscribe(on => this.power(on)); } } 

Reactive programming class LightBulb { constructor(lightSwitch) { lightSwitch.subscribe(on => this.power(on)); } } 

Reactive programming Publisher / Subscriber design pattern reflects the concept. PUBLISHER SUBSCRIBER 

What is RxJS? Reactive Extensions for JavaScript is a library for transforming, composing, and querying streams of data. See: https://rxjs-dev.firebaseapp.com/ 

What is RxJS? 

What is RxJS? const { of } = Rx; const numbers = of(1, 2, 3); numbers.subscribe(num => console.log(num)) OBSERVABLE SUBSCRIBER 3 2 1 

const calls = [ { who: 'boss' }, { who: 'spouse' }, { who: 'unknown' }, { who: 'mum' }, ... ]; const phoneCalls = zip( interval(1000), from(calls) ).pipe(map(([_, call]) => call)); CODE! 

The if-else problem MAPPING OBSERVABLE SUBSCRIBER map(({ who }) => { if (who === ‘mum’) return ‘ ’; if (who === ‘boss’) return ‘ ’; ... else return ‘ ’; }) 

phoneCalls.pipe( map(({ who }) => { if (who === ‘mum’) return ‘ ’; if (who === ‘boss’) return ‘ ’; if (who === ‘spouse’) return ‘ ’; /** * * More response conditions here * */ else return ‘ ’; }) ); CODE! 

phoneCalls.pipe( tap(({ who }) => { if (who === ‘mum’) doSomething(); ... else doSomethingElse(); }), map(({ who }) => { if (who === ‘mum’) return ‘ ’; ... else return ‘ ’; }) ); CODE! 

phoneCalls.pipe( tap(({ who }) => { if (who === ‘mum’) doSomething(); ... else doSomethignElse(); }), map(({ who }) => { if (who === ‘mum’) return ‘ ’; ... else return ‘ ’; }) ); CODE! 

Reactive if-else pattern MUM const mumResponder = phoneCalls.pipe( filter(({ who }) => who === ‘mum’), map(() => ‘ ’), tap(() => textBack(‘Yes mum...’)) ); 

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(() => ‘ ’) ); 

Reactive if-else pattern OBSERVABLE SUBSCRIBER SIDE EFFECTS MUM SPOUSE BOSS UNKNOWN 

Reactive if-else pattern OBSERVABLE SUBSCRIBER const phoneResponder = merge( mumResponder, spouseResponder, bossResponder, unknownResponder ); 

References https://rxviz.com https://rxjs-dev.firebaseapp.com https://blog.rangle.io/rxjs-where-is-the-if-else-operator 

Thank you. LinkedIn: /in/jakubbarczyk Twitter: @jakubbarczyk