Introducing BLoC Pattern with React and RxJS

Introducing BLoC Pattern with React and RxJS

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... 🔥🔥🔥

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.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Create Liquid Swipe Animation in Flutter | Liquid Swipe Flutter

Today tutorial, I am going to show you how to create Liquid Swipe Animation in Flutter. liquid Swipe animation is amazing and its Created for iOS Platform and f

11 Best Flutter Development Tools You Will Need As A Beginner | AllTechSavvy

In this tutorial, I am going to show you some of the Best Flutter development tools available in the market which will help you to make Development Produc

How to Create Splash Screen in a Flutter App | Splash Screen Tutorial

Splash Screen help Brand to get Noticed Or Brand Awareness so Today I am going to show how to create Splash screen in a flutter Splash Screen Animation can b...