Know the Flux and Redux!

ReactJS is a frontend framework library, created by Facebook in 2013. It creates a single page application with writing reusable and modular UI components.

ReactJs support the Unidirectional Data Flow. This means, parent component sending the state data to its child component via read-only props.

Unidirectional Data Flow Advantage

Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application.

“One-way data flow gives better performance and control throughout the application. It also makes the debugging any issue easier as we know what data is coming from where.”

Flux

Flux is an architecture or pattern for unidirectional data flow. It is not a framework or a library.

It was developed by Facebook for building client-side web applications. The flux provides a simple way to control and manage the state of the application.

Actually the truth is that it’s not a new pattern. It’s just a modified version of an Observer pattern so that it can fit for React. The core idea behind it that,

• Keep all common state data of different components on a single place, called the global store.
• Whichever component needs this data, they have to subscribe to it.
• And if any component changes this global store data, then other subscribed components should get the update of new state data.

Flux Concept

Flux has mainly four major components.

1. Action: In Flux, the action is a JavaScript object and represents an event. For example button click, search, etc are actions. The action sends to a dispatcher to trigger the data flow.
2. Dispatcher: Dispatcher is responsible for sending the action data to the different stores. In Flux, an application has only one dispatcher, which is the central hub of the application.
3. Store: A Store is a singleton object which held the application logic and common state of the different components. In Flux, there could be multiple stores in an application as per requirements. This store also contains the data logics. This means, according to received action from the dispatcher, what should do with that data?
4. View: It receives updated data from the store and renders the app.

Flux Architecture

Redux

Redux is a library which can be use to implement Flux architecture. But it’s not exactly same as Flux.

Also, redux is not a part of ReactJS. It’s a separate JS library used by different JS frameworks to implement a unidirectional data flow concept and makes state management very easier.

What problem is there without Redux?

For example, if you have multiple nested components, and you have to share the value of the outside or outer component to the innermost component or on different page components then, you have to pass it through different components. It is really difficult to handle.

Data Flow From Outer Component to Different Nested Inner Component

But if your application is more complex and big(means there are many pages like this), then this problem will become more difficult to handle properly.

Solution:

Manage a global store where all shared variables and values are stored. This global store contains the state of whole application. Now all pages or components can access data from this store. So no need to pass the data from different components or pages. To get the updated value, each component need to subscribe to this global store. So that, whenever any value will be changed by any component in store, then it will send the updated value to all subscribed components or pages.

Redux Concept

Redux Data Flow

The below diagram shows the redux data flow.

Redux Data Flow Architecture

Redux has mainly three major components.

1. Action Creator: Action creator provides the action object. Same as flux, it represents the event. To change the state of the application, we call an action creator.
2. Reducer: Reducer is part of the global store. It holds the logic for changing the data of the state. It takes the current state and action object And performs some operation on the data then updates the state.
3. State: State is also part of the store. Reducer passes the updated state in a global store’s state. Initially, it contains the default values. After getting an action call, the reducer updates the state based on some logic.

Flux Vs Redux

Let’s summarize the difference between flux and redux.

In my next blog, I’m will give a simple example of a Redux library and it’s different methods use.

Thanks for your time!