Introducing BLoC Pattern with React and RxJS
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 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
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.
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?
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.
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:
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.
The example used in this article is available in this repository:
Instructions of how to use and install BlocBuilder is available in this repository:
After all, thank you for your attention. Please let me know if you liked this article and the topic in the comments. It's always great to receive feedback. Feel free to contact me by LinkedIn or Twitter. See you soon!
References
Why use RxDart and how we can use with BLoC Pattern in Flutter?
