What is REDUX?

Being a web developer, you should always learn new frameworks and libraries. In recent times, The most popular and trending library is ReactJs. When you learn ReactJs you may come across state management. State management is crucial in ReactJs applications. When it comes to state management in ReactJs REDUX is one of the most popular library. Redux is a library for managing data in your applications. You really don’t need to use Redux until you have some problems related to state or your application has very complex data structure and application requires lot of updates frequently.

Why Redux?

Yes. You should question yourself why you should use Redux. Motivation is very simple, Redux allows you to predict application state at any time. Imagine in your single page application, one model updates one view and another model updates another view, which in turn causes update of another view. If this keeps on going, you will no longer understand what is happening in your application and it’s very difficult for you to debug your application. The main idea of Redux is to keep your application data in single place. That means all your application data will be store in single object.

How Redux works?

Redux maintains all your data in single store. You need to subscribe to store if you need to re-render view when state changes. You need to dispatch an event when you want to update state. In Redux, data flows in single direction. Store is immutable. For every change/event/action new store will be created.

Here I’m not going to talk about how to connect react with redux. My idea is to tell you how simple redux is. Once you understand this, I’m sure you will love redux.

I will show you how redux works. Let’s dive into it. First thing is you need to create store. To create store, redux library provides createStore function. To install redux run this command. I assume that we are all familiar with ES6 and npm.

npm install redux --save

After installing import createStore from redux

import { createStore } from 'redux'

Before we create store we need to learn two important things. Actions and Reducers.

Actions: Actions are payload of information that sent from application to store. Actions are nothing but events in your application. for example onClick of button you want to update data. To send an event to store you need to dispatch an action. Action contains type and data properties. Type property is used by Reducers to modify your store based on what type it is. Simple action looks like this

{ type:”UPDATE_STORE” ,data:”new data” }

We can dispatch an action to store using dispatch function. dispatch function is available in store object.

store.dispatch({ type:”UPDATE_STORE” ,data:”new data” });

Reducers: Reducers are nothing but pure functions and returns new store when you dispatch an action. Reducers return new store with new data or updated data in response to the what action is triggered. Based on the action only reducers modifies your store. Actions are just events to update your store. Reducers are responsible for returning new store when you trigger an action. Based on the action new store will be returned. Typical reducers looks like this

function myReducer(store= initialStore, action){
   // here you can have switch case to handle different actions.
   switch(action.type){
        ......................
   }  
   // finally return store  
   return store;
}

To work with store you need to pass reducer to it. store.createStore() function takes reducer and returns store object for us. store object has dispatch(), subscribe(), unsubscribe() and getState() functions.

let store = createStore(reducer);

If you want to dispatch an action to store, use store.dispatch() function. To detect store changes use store.subscribe(callback) function. To get data use store.getState() function. Here I have written very basic example that shows how Redux works.

In this example, We just add/subtract number to store based on action. When we dispatch store.dispatch({type:”ADD”, number:10}) reducer adds number to store and return new store.

I hope you understood basics of Redux. I tried my best to simplify as much as possible.In my next article I will focus on how to connect react with redux. You can read about redux here. I suggest you to go through redux before you dive into react-redux. If you have any suggestions please feel free to comment.

Happy coding. Thanks.