Redux and The Flux Architecture

Flux Architecture:
Flux is AN architecture that Facebook uses internally when operating with React.
It is not a framework or a library.
It is merely a replacement quite an architecture that enhances React and also the idea of unidirectional data flow.

Redux is a predictable state container for JavaScript apps. Redux is a state-management tool that is mostly used to React. Now speaking in terms of React, simple applications have some components and the main component which acts as the leader for the state of our application. Any changes made are reflected back to the main component which then modifies the state.
But in reality, while creating a web application to solve a real-world problem, we encounter hundreds of components that are organized into multiple groups rather than one group with one main component. So they are organized into multiple groups wherein each group has a main component managing the state of that group.

Now, if you make changes to one of the components then one of the other components may need re-rendering but if they don’t share a common main component then passing of information between them can be difficult.
This is where we need an MVC (Model, View, Controller) model for the application.

• MVC model: An MVC model basically captures the entire state of the application and any changes you want to make to the model from the view will have to go through the controller to the model.
  

Need for Flux Architecture:

MVC faced certain issues due to which it couldn’t manage the application the way we wanted it to. That’s where a new approach called Flux architecture originated from the MVC model was designed. This approach was basically designed to organize your code in a simpler web. The problems that with MVC encountered was the fact that the updates, lead to a cascading flow of updates within the models, and this becomes a tangled web, which makes the application really complex.
The flux architecture, however, provides a unidirectional flow where a central unit for the entire application is called the store. In Flux architecture, you can have multiple stores. A store basically acts as a storehouse for the application state. So, you can only modify the state of your application by requesting the store.
The dispatcher becomes a controlling unit for serializing any actions that are requested for changing the store. The store can be subscribed by views, be it React views or controller views.

The storehouse of the state is the main component that will get its state from the store of the flux architecture. Now whenever a change is made, the controller views go back are able to get the updated state.
And this, in turn, might result in re-rendering of some parts of your views or some parts of your components within your application. So, this is what is meant by the unidirectional flow of data which forms the basis for the Flux architecture.

Redux Architecture:

Redux is a predictable state container for JavaScript applications. Redux derives its ideas from the Flux architecture. It is basically a flux-like approach to React applications.
Redux doesn’t necessarily have to be used with React only, you can use it for AngularJS or JS too. But Redux works really well with React. Redux basically provides a way for managing the store, unidirectional flow of data and much more.
Flux architecture has multiple stores that are coordinated together by the dispatcher and when there is a change all the stores need to update themselves. But in Redux we have a single store. A single store that handles the entire application. Any changes to the store are done through actions.

Now, in Redux we have some functions which are called reducer functions. These functions basically take the previous state of the application and the action specified and generate the next state for the application. In Redux, changes in the state can only be made using these reducer functions. The previous state still remains intact and a new state is generate originated from the previous one.

Use of Redux:

• Time-travel debugging: In Redux you can always walk back and check the changes you have made to the states. Easy logging of states.
• Undo & Redo: While walking back you can always update/modify the states as required by you.
• A Single Source: Redux has only one single store which makes it really simple to understand.
• Reducer Functions: These functions generate a new state which is originated from the previous state and hence it helps to link all the states together
• Use of JS: In the reducer function along with the previous state, the action is specified. Action comprises of a basic JavaScript Object which is called as a Payload.
• immutability: When a new state is generated, the previous state remains as is and is not modified in any way.

Redux gets integrated together with React using a model called react-redux. Now for this integration, we use the react-redux package. But here we will be covering only Redux. So as a first step, you need to install redux into your React application:

npm install redux --save

OR

yarn add redux

Examples:

import {
    createStore
}
from 'redux'

function count(state = 0, action) {
    switch (action.type) {
        case 'INCR':
            return state + 1
        case 'DECR':
            return state - 1
        default:
            return state
    }
}
let sample_store = createStore(count)
sample_store.subscribe(() => console.log(sample_store.getState()))
sample_store.dispatch({
        type: 'INCR'
    }) //Output:1
sample_store.dispatch({
        type: 'INCR'
    }) //Output:2
sample_store.dispatch({
        type: 'DECR'
    }) //Output:1