Redux to the Rescue

Posted By : Ankit Srivastava | 14-Dec-2020

REDUX

 

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave systematically, run in several environments (client, server, and native), and are simple to test. On top of that, it provides an excellent developer experience, such as live code editing combined with a time-traveling debugger.


You can use Redux with React, or with any other view library. It's tiny (2kB, including dependencies), however includes a giant ecosystem of addons available. Redux is all about having a "Central Store". Redux is a third-party library which works totally independent of react , it is most often seen with react but it can work with other frameworks as well .

 

The first building block beside the central store are "Actions" which are dispatched from our javascript code . In a react app, they are dispatched from within our component. An action is just an information package in the end with a type (something like ADD, DELETE etc) . Possibly it also holds a payload for example if action is ADD then we need to also pass the information on what to add and it will also be a part of action. So , Actions are information package we are sending out to the world  or to the redux to be precise . Action is just a messenger , it does not have any knowledge of updating the store .

 

The thing changing the store is known as "REDUCER". We can have multiple reducers but in the end, all of them are combined to form a root reducer. So the action reaches the reducer and the action consist of a "Type" , the reducer can check the type of the action . Reducer in the end is just a pure function which receives the action and the old state as input and which then spits out an updated state . The important part is that the reducer should only execute synchronous code (no side effects , no HTTP requests). Reducers then spits out the updated state which then is stored in store again and replaces the old state and that has to be done in an immutable way . The store triggers all "Subscription" whenever the state is updated in the store. The component is subscribed to the store and hence it receives the updated state. Component uses updated state as props .

 

 

Below is example to show the basics of redux .

// setting up reducers and store 

const redux = require('redux');
const { act } = require('react-dom/test-utils');
const createStore=redux.createStore

const initialState={
    counter:0
}

//reducer

const reducer=(state=initialState,action)=>{
    if(action.type === 'INC_COUNTER'){
        return{
            ...state,
            counter:state.counter + 1
        }}
        if(action.type === 'ADD_COUNTER'){
            return{
                ...state,
                counter:state.counter + action.value
            }
        }
    return state
}

//store

const store=createStore(reducer)
console.log(store.getState())


//subscription

store.subscribe(()=>{
    console.log('[SUBSCRIPTION]',store.getState())
})

// dispatching actions
store.dispatch({type:'INC_COUNTER'});
store.dispatch({type:'ADD_COUNTER', value:10 });
console.log(store.getState())

 

Types of State

 

Redux should be only used when the size of our app is large and there is a complex architecture too . In a simple app , setting up redux can take longer then the benefits we can get out of it . . As redux should be used in decent size apps , so we should only use redux to store some specific type of states. 

 

Conclusion

 

We have discussed the main features of Redux and why Redux is useful to your app. While Redux has its benefits, that doesn't mean you ought to set about adding Redux altogether of your apps. Your application might still work well without Redux.One major advantage of Redux is to feature direction to decouple “what happened” from “how things change.” However, you ought to only implement Redux if you identify your project needs a state management tool.

 

We are a 360-degree SaaS app development company that provides end-to-end software development services with a focus on next-gen technologies. Our development team specializes in using JavaScript technologies like Angular, Node, and ReactJS to build scalable, responsive, and feature-rich web applications. We also have a dedicated team of Full Stack developers that are capable of performing both frontend and backend tasks. Our SaaS application development services address your mission-critical project requirements through high-quality web and mobile applications that are easy to scale. 

About Author

Author Image
Ankit Srivastava

He is a Front-end developer with demonstrated history of working on web apps . Tech stack Includes JavaScript , React Js,Gatsby Js, Html , CSS . He is passionate about his work, and always like challenging tasks. 

Request for Proposal

Name is required

Comment is required

Sending message..