React 101.0

This for anyone like me curious to learn more about the famous JS Library making headlines recently. Its a series about React and Redux. Now is the time to grab your popcorn and soda or whatever you’re into :)

What the hell is React??

JS library for building user interfaces. You have anything that understands javascript? You can use React to build it’s interface. Unlike Angular or other popular frameworks out there, React doesn’t assume full end to end solution. It just focuses on making the view as awesome as possible, hence I like to see it as a library not a framework.

Why react?

1. Performance gains.
2. Does one thing very well, the view, in MVC* or MVV* or M* whatever you prefer calling it.
3. Data flows in a single direction, that simplifies life a lot. How? will explain.
4. It’s just sexy, ask anyone coming from an angular background ;)

React is made to have great performance out of the box because of its nifty reconciliation algorithm. Basically the algorithm calculates what changes need to be made before hand and updates the DOM tree accordingly.

What makes react stand out? You wonder…

React writes HTML using JS depending on what data(state) is presented to it rather than trying to make HTML “smarter” like angular. Redux comes in when we want to manage the data aka state. So Redux is a state management framework which is also amazing, in my opinion.

Not taking jabs at angular, just to be clear, for those that go to angular church on Sundays. I love angular for what it’s able to do in its prime hence it has some things that it does better than React. On that note, we can’t really compare the two because one is a library and the other is a framework but to my defense they are often discussed in the same breath. Let’s get started…

React + Redux

State management gets complicated as apps scale. Data changes and bug tracking gets equally complicated. Redux is inspired by Flux which is complimentary to React Components by utilizing unidirectional data flow.

Flux is a state management pattern like OOP is to Python for instance. All started by this genius I don’t know about from Facebook. Whoever you are, know that you’re the real MVP!

This brings us to the Store. Store is where the state management happens. in a case of Redux, there’s a single store or what is famously know as single source of truth. Flux has multiple sources of truth.

Flux has a decentralized approach to state management only that can get messy with scale. We will focus on redux but it’s important to know where all this is coming from.

See below to see the differences:

Flux

Redux

Redux principles

1. State is read only
2. Changes are made with pure js functions
3. Single source of truth

Actions(What?)

1. Gateway to change state. I thought state is read only? I know, we will justify that soon :) bear with me.
2. Actions are just plain javascript object that must have a type that indicates what type of action or event is being performed.

function sendEmail(emailBody){
    return {
        type: SEND_EMAIL, //required
        payload: emailBody    
    }
}

Reducers (What happened?)

Functions that are responsible for what happened. Someone has to be responsible right? So reducers decide how to change state given the action.

const email = (state, action) => {
    switch(action.type){
       case 'SEND_EMAIL':
           return state;
       default:
           return state;
    }
    
}

These functions have to be pure. What does “pure” mean? Well, some describe pure functions as functions that do not alter input data and doesn’t depend on external data, in other words they just stand alone. For instance:

const sum = (x, y) => { return x + y}; //reducers operate as such

Why should reducer functions remain pure?

Redux compares memory location of old state object vs new state object, so you have a situation where two objects are pointing to the same location. If you decide to mutate the old object inside the reducer, then redux thinks nothing really changed since old and new point to same location. Boom! You earned yourself a fat bug. So don’t do the following in a reducer:

const sum = (x, y) => {
    x = x-2; //crime against humanity
    return x + y;
};

Store(where?)

Application state lives here.

Summary

1. React is JS library that help to generate HTML given data.
2. Redux is a framework that manages data/state of the application
3. React and Redux are a match made in heaven
4. Actions — -talk to — -Reducers — -talk to — -Store — -talk to — -view.
5. What’s next: We will step into the view and see what composes the view.

If you liked the post, don’t be shy to spread the love :)