DEV Community

loading...

Reactive Programming Basics - adding of two numbers and beyond

muthuishere profile image Muthukumaran ・2 min read

Disclaimer : I am not going to explain observables, Observer,Subscriptions,Subscriber,preventing memory leaks… Just simple reactive programming.

a=74
b=18
c= a +b
Enter fullscreen mode Exit fullscreen mode

The value of c => 92

If our program is completed here , we don’t have to go into reactive programming.

Now consider

a=a + 1

Enter fullscreen mode Exit fullscreen mode

Stop..

It appears lame to use variables like a,b,c usage and incrementing one of it.

We will consider practical situation

Scenario

Donald Trump born on 14 June 1946 & Cheguara on same day (14 June) of 1928 , the age difference between these two is 18 years
Now we can write these as

let ageOfTrump = 74
let ageOfCheGuara = ageOfTrump + 18
Enter fullscreen mode Exit fullscreen mode

so ageOfCheGuara would be 92
And the long kept secret about Age is , it always kept incrementing on birthday 😊

So if there is a method happyBirthdayTrump which increase age of trump

function happyBirthDayToTrump(){
    ageOfTrump=ageOfTrump + 1   
}
Enter fullscreen mode Exit fullscreen mode

What should be the value of ageOfCheGuara after this method has been called?

Still  92, 
Enter fullscreen mode Exit fullscreen mode

The contract (ageOfCheGuara = ageOfTrump + 18) denotes
ageOfCheGuara should always be sum of ageOfTrump & 18 , But unfortunately it was not always.

How to fix it

So to fix it , Whenever Trump got a birthday and his age gets incremented

We should also be updating ageOfCheGuara ,something like this

function happyBirthDayToTrump(){
    ageOfTrump=ageOfTrump + 1
    ageOfCheGuara =  ageOfTrump + 18

}
Enter fullscreen mode Exit fullscreen mode

Now things are fine, Because i keep on insisting that relationship again.

Is there a way , I could specify only once the relationship and use it across the application

if I could update ageOfTrump, ageOfCheGuara should automatically be updated.

This is a common problem, if you are from C or C++ background you could have used pointer to look into address than its value, which will help us to solve these kindda issues.

But This is Javascript, we don’t do that. How can we do ?

By making every relationship as sacred and final and no unwanted updates for sake of programming, you have already been making your system reactive.

Making Reactive with RxJS

There are many ways to achieve it , We use Rx Libraries to achieve it here

So the
ageOfTrump = 74
ageOfCheGuara = ageOfTrump + 18

instead of using as variables we will have something like

const ageOfTrump = new BehaviorSubject(74)
Enter fullscreen mode Exit fullscreen mode

BehaviourSubject helps us to set a default value 74
We can retrieve its current value by using getValue method

Don’t worry about these syntax, There are more than 100’s of operators. Just focus on the concept.

const ageOfCheGuara = ageOfTrump.pipe(
                        map(val=>val + 18)
                        )
Enter fullscreen mode Exit fullscreen mode

by using pipe operator with ageOfTrump , we are specifying ageOfCheGuara depends on it.map operator accepts a function , which will receive the value from trump and transform the value

The happyBirthDayToTrump method will be

function happyBirthDayToTrump(){
    const incrementedAge =ageOfTrump.getValue() + 1
    ageOfTrump.next(incrementedAge)
}
Enter fullscreen mode Exit fullscreen mode

The currentValue to be retrieved with getValue method

The value should be set with next method

Now we have made these variables reactive.

The entire source code is available on Link

The same has been demonstrated in video and available on

Link

Discussion (0)

pic
Editor guide