Introducing BLoC Pattern with React and RxJS - As we saw, RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based codeā¦
Hello! Have you already heard about BLoC Pattern? BLoC Pattern was announced by Paolo Soares in the Google Dart Conference 2018. Since then, itās usual to hear about this pattern linked with Flutter, as an alternative way to do state management. Thatās because the initial proposal was to reuse the code related to the business logic in different platforms, in this case, Angular Dart and Flutter. But now letās try to bring these concepts to React and JS environment, and think how it can be useful, for example, in the reuse of the code between React and React-Native applications.
First of all, letās see a little bit about RxJS before introducing the pattern.
Reactive Programming with RxJS
ReactiveX combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way of managing sequences of events. Here we are going to see especially these 3 concepts:
- Observable: represents the idea of an invokable collection of future values or events.
- Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
- Subject: is a special type of Observable that allows values to be multicasted to many Observers.
Every Subject is an Observable. Given a Subject, you can to it, providing an Observer, which will start receiving values normally. Now letās see the usage of the Subject class and others which extends from it. So letās start from the beginning:
Subject:
Thatās the usage of a simple Subject object. We created the Subject and we subscribed a function as Observer which will print the data when the Subject receives a new value. Then we feed the subject with the values 1 and 2. The expected output is Value 1 and Value 2.
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
BehaviorSubject:
One of the variants of Subjects is the BehaviorSubject, which has a notion of āthe current valueā. It stores the latest value emitted to its consumers, and whenever a new Observer subscribes, it will immediately receive the ācurrent valueā from the BehaviorSubject. Also, it possibilities we initialize our Subject with an initial value. Letās see:
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
ReplaySubject:
A ReaplaySubject is similar to a BehaviorSubject in that it can send old values to new subscribers, but it can also record a part of the Observable execution. Also, it possibilities we initialize our Subject saying how much values we wanted to be recorded. In other words, we can specify how many values to replay. Letās see:
const rxjs = require("rxjs");
const subject = new rxjs.ReplaySubject(2); //Buffer with size 2
subject.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
Now letās figure out what the BLoC Pattern has to offer to us, and how can we use it with RxJS.
BLoC Pattern
What the BLoC(Bussiness Logic Component) seeks for, is take all business logic code off the UI, and using it only in the BLoC classes. It brings to the project and code, independence of environment and platform, besides put the responsibilities in the correct component. This pattern is all based on Reactive Programming, because of it, we are going to use the RxJS library. As we saw, RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
All communication between the UI (React Components) and BLoC Classes (JS Classes) can be only be done between the Observables. Thatās why we are going to use the Subjects classes, which extends from Observables.
https://www.didierboelens.com/2018/08/reactive-programmingāstreamsābloc/ (Adapted)
Looking at the architecture we can see that:
- Components send data/event (value) to the BLoC via Subjects.
- Components are notified by the BLoC via subscription.
- The business logic which is implemented by the BLoC is none of their concern.
From this statement, we can directly see a huge benefit. We may change the Business Logic at any time, with a minimal impact on the application. And see that thereās no business logic in the component, that means what happened in BLoC is not the concern of UI. This architecture improves even easier tests, in which the business logic tests cases needed to be applied only to the BLoC classes.
Now letās see it in practice
With all concepts showed before you can already build your React application applying the BLoC Patter. But youāll still need to deal with state management because the Subject subscription will be directly attached to your component. Because of that, I created a component called BlocBuilder which renders itself based on the latest snapshot emitted by a Subject and will help us to implement the pattern focusing on main principles.
What do we want?
https://wiltonribeiro.github.io/bloc-react-example/
Letās create a simple counter page with increment, decrement functions, and an error handler. Just to practice what we saw until here.
BLoC Class
We are going to create our first BLoC class. The class will be responsible to carry all subjects related to the Business Logic which the class is responsible, in this case, to counter.
//importing the rxjs library
import * as rxjs from 'rxjs';
class CounterBloc {
constructor(){
//creating our BehaviorSubject with initial value of 0
this.counterSubject = new rxjs.BehaviorSubject(0);
}
//an increment function that deals with the subject
increment = () =>{
let count = this.counterSubject.getValue() + 1;
this.counterSubject.next(count);
};
//a decrement function that deals with the subject
decrement = () => {
let count = this.counterSubject.getValue() - 1;
this.counterSubject.next(count);
};
//the error function with deal with sending an error through the subject
error = () => {
this.counterSubject.error("An error simulation");
};
//the get function to return the subject. It allows the component to subscribe as Observer.
getCounterSubject = () => {
return this.counterSubject;
};
}
export default CounterBloc;
This app example is pretty simple. But imagine if this app was bigger and thatās one of BLoC classes that you was working hard. But now the requirement has been changed and the increment function needs to add two at time. Do you agree with me (that in this case) a requirement changing in the business logic shouldnāt affect UI code, right? If yes, great! You got it, that is the point to separate responsibilities. So if it happens only the BLoC classes will be updated without any impact in the UI code.
UI Component
Our UI Component is responsible for initializing our BLoC class, then pass it through parameter to the BlocBuilder. What happens is:
import React from 'react';
import logo from './logo.svg';
import './App.css';
//importing the BlocBuilder
import BlocBuilder from "bloc-builder-react";
//importing our CounterBloc
import CounterBloc from "./bloc/CounterBloc";
class App extends React.Component {
constructor(props){
super(props);
//initializes the CounterBloc
this.bloc = new CounterBloc();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
//using BlocBuilder to render based always on the latest snapshot emitted by a Subject
<BlocBuilder
//setting to the BlocBuilder our Subject
subject = {this.bloc.getCounterSubject()}
//builder function that will render our JSX when the subject receives a new value
builder = {(snapshot) => {
//if that's not an error, let's render a div with de value of the snapshot
switch (!snapshot.error) {
case true:
return (
<div> The count has the current value of {snapshot.data}</div>
);
//else let's expose the error
default :
return (<div>Error : <code>{snapshot.error}</code></div>);
}
}}
/>
<div className="App-buttons">
//setting Bloc functions to the properly buttons
<button onClick={this.bloc.increment}>Incriment</button>
<button onClick={this.bloc.decrement}>Decrement</button>
<button onClick={this.bloc.error}>Simulate error</button>
</div>
</header>
</div>
);
}
}
export default App;
Flux
- In the render function. When the BlocBuilder subscribes as an observer of our counterSubject, as a BehaviorSubject, it catches his initialization value. Then it renders the builder JSX, containing the full text exposing the counter as 0.
- When someone clicks on the button to increment, it calls our bloc method to increment. Our bloc class gets the last value from our counterSubject, add one and feed our subject with the new value.
- Then our BlocBuilder as an observer will render itself again, but now exposing the full text with the value 1.
- The same as above happens to the decrement function.
- When someone clicks on the error function, our bloc will send an error message to the subject.
- Then our BlocBuilder as an observer will render itself again but now will check that some error has been happened and will expose a message with the error.
Notes
And thatās it. The pattern seeks to separate the responsibilities and put them in the right place. And more, the use of reactive programming can provide a great way to make the state management of your app much more simple. Using this pattern you can, for example, make components indirectly communicate with others just through the same BLoC Class. Suppose a *SliderShowBloc, *for example, it can be the bridge between a reactive communication between your Slider Banner Component and the Slider Buttons Component.
When all business logic code is the BLoC Classes, you can just reuse your code to any platform which accepts the same programming language. In this case, it can be useful to reuse code in the implementation of a Web App with React and a Mobile App with React Native.
#reactjs #flutter
