Introducing BLoC Pattern with React and RxJS

Wilton Ribeiro
May 30 · 7 min read

Reactive Programming with RxJS

Subject:

const rxjs = require("rxjs");const subject = new rxjs.Subject();subject.subscribe(function(v){
console.log(`Value ${v}`);
});
subject.next(1);
subject.next(2);
//output is:
//Value 1
//Value 2
const rxjs = require("rxjs");const subject = new rxjs.BehaviorSubject(0);subject.subscribe(function(v){
console.log(`Observer A ${v}`);
});
subject.next(1);
subject.next(2);
subject.subscribe(function(v){
console.log(`Observer B ${v}`);
});
subject.next(3);//output is:
//Observer A 0
//Observer A 1
//Observer A 2
//Observer B 2
//Observer A 3
//Observer B 3
const rxjs = require("rxjs");const subject = new rxjs.ReplaySubject(2); //Buffer with size 2subject.subscribe(function(v){
console.log(`Observer A ${v}`);
});
subject.next(1);
subject.next(2);
subject.next(3);
subject.subscribe(function(v){
console.log(`Observer B ${v}`);
});
//output is:
//Observer A 1
//Observer A 2
//Observer A 3
//Observer B 2
//Observer B 3

BLoC Pattern

https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/ (Adapted)

Now let’s see it in practice

Here we go

What do we want?

https://wiltonribeiro.github.io/bloc-react-example/

Notes

References

DailyJS

JavaScript news and opinion.

Wilton Ribeiro

Written by

Software Engineering student. In love with Flutter and Golang.

DailyJS

DailyJS

JavaScript news and opinion.