MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.

In order to understand the mobx core concepts, we should first dive into functional reactive programming.

Functional Reactive Programming

Functional programming is a paradigm of developing applications using pure functions with immutable data structures and without side effects. A pure function always returns the same output for the same given input and does not operate on variables outside its function scope.

// Pure function
function result(a, b){
  return a + b
}
result(3,5); 
// Impure function
const c = 6;
function result(a,b){
   return a + b + c;
}
result(3,5)

Functional programming would be an ideal programming solution that gives predictability and is less error prone.

However, it would be difficult to build real world programs without mutable data structures and side effects. If an action has an impact outside the scope where it happens, we call this a side effect. The typical side effects can be rendering, network requests, file operations, CLI / log output etc. We can use** functional reactive programming** to control side effects efficiently while still retaining functional programming principles to some extent.

Reactive programming is about controlling side effects

The essence of functional reactive programming is to specify the dynamic behavior of a value completely at the time of declaration. Let’s consider a spreadsheet application. In a spreadsheet, the variables are cells. If any of the cells in a spreadsheet change, any cells that refer to that cell change as well.

Passive Programming Vs Reactive Programming

In Passive Programming the relationship between two components is that one component usually controls the other component.

Passive Programming. Ref: http://dontpanic.42.nl/2016/07/reactive-programming.html

Car.prototype.turnKey = function() {   
  this.engine.fireUp(); 
}

In reactive programming, the relationship is inverse. The component itself is responsible to control its value and behavior.

Reactive Programming, Ref: http://dontpanic.42.nl/2016/07/reactive-programming.html

Engine.listenToKey = function(car) {   
  car.onKeyTurned(() => {     
    this.fireUp();   
  }); 
}

The observer pattern

In this pattern. we have a **Producer **that keeps a list of listeners subscribed to it. Listeners are notified whenever the state of producer changes.

function Producer(){
 this.listeners = [];
}

Producer.prototype.add = function(listener){
 this.listeners.push(listener);
}
Producer.prototype.remove = function(listener){
 var index = this.listeners.indexOf(listener);
 this.listeners.splice(index,1);
}
Producer.prototype.notify = function(message){
 this.listeners.forEach(function(listener){
  listener.update(message);
})
}
var listener1 = {
 update: function(message){
  console.log('message')
 }
}
var notifier = new Producer();
notifier.add(listener1);
notifer.notify("Hello World");

Observable

An observable emits its values in order but instead of consumers requesting the next value, the observable pushes to consumers as they become available. ie. emitting values and pushing them to its listeners. Observable is a sequence whose items become available over time. When an observer is subscribed to an observable, it will receive the value in the sequence as they become available without having to request them. Here is an example of an observable using RxJS library.

var source = Rx.Observable.fromEvent(document.body, 'mousemove');

source.subscribe(val => console.log(val),
 e => console.log(e),
 () => console.log('completed')
);
source.subscribe(val => {
  console.log(`x: ${val.offsetX} & y: ${val.offsetY}`)
  },
  e => console.log(e),
 () => console.log('completed')
);

We can create observable of sequence of mousemove events and observer listening to changes of that observer can react to the event.

#mobx-react #observables #mobx #reactive-programming #redux #reactive