A guide to Core Redux concepts

A guide to Core Redux concepts
A guide to Core Redux concepts

As defined by the official redux tutorial, Redux is a pattern and library for managing and updating application state, using events called ‘actions.’

In simpler words, Redux helps to manage the state changes by specifying what needs to be done when a particular state changes in your application.

Let’s take the example of a news website. The data has to be provided to the main news page and also has to be passed to pages based on the categories preferred by the logged-in user. In React, the data flow is unidirectional, which means, it can only be passed down to different levels. However, if the data is needed by any other component in the same level, it isn’t possible for the same data to be shared.

Redux solves this problem, it creates entirely different storage of data and distributes it to components as and when required. Although redux requires you to write longer pieces of code for simple operations, it is always better to spend more time on your code and make everything look clean, neat and segregated, exactly what Redux is suitable for.

You should definitely choose redux if you have an application such as a music player, video player, video streaming website, blogs with heavy amounts of information, news websites etc. These applications require continuous and frequent updating of data, which means, the state of these applications changes frequently. In addition to this, while working on an application which has a large team and a large codebase, Redux is beneficial to use because of its easy to read and understand code.

In the beginning, it might be a bit difficult for you to understand Redux concepts. However, if you have a good command on React and ES6 concepts, you will get the hang of Redux in no time!

Core Concepts:

  1. Redux State Management: Let’s continue with our example of the news website. Let’s assume after every 5 minutes, a new news article has to be posted on the website. Let the container containing the news article be called ‘news-container’. The news-container is our component whose properties are managed by an object. This object is known as a state. Now there can be a scenario where this specific news article has to be displayed on the main news website and also on the home pages of the readers who have preferred to view that particular category of news. On the home page, let the container containing that specific article be called ‘user-news-container’.
    We have two components, news-container and user-news-container who have to use the same state and they are located in entirely different locations of our news web application. This is where Redux comes into the picture. It plucks out the state and places it in an entirely different location, away from the component tree and hence multiple components can access the specific state easily. This makes our code easier to use and manage.
  2. Redux Immutability: Mutable means which can be changed, and immutable means which cannot be changed. When we are creating a state object, if the object is mutable, then the properties of the object will change and it will cause a huge obstruction while rendering. However, if the state is changed immutably, a new object (copy of the original state object) is created every time a change in state is observed which preserves the integrity and the originality of the state object thereby preventing it from bugs.  
  3. Redux Actions: In first glance, actions might seem to you that actions tell you what to do when a state changes. But rather, actions describe what is to be done when a state changes in your application. An action mandatorily has to have a type which is a string and follows the syntax of “domain/eventName” where a domain is the category of the specific action and eventName is the change in state that has to be performed.

Example of an action:

const addNews = {
      type: ‘News/updateNewsContainer’,
      payload: ‘Recent Article’ 
}

An optional parameter called payload can be added which has more information about the state change performed.

4. Redux Action Creators: You might feel that it is very difficult to create a new action object every time a state has to be changed. This is where action creators come into the picture. Action creators are functions that return action objects.

Example of an action:

const addNews = news => {
     return {
         type: ‘News/updateNewsContainer’,
         payload: news
     }
}

5. Redux Reducer: A reducer is a function which causes state changes based on the action being performed on the application. Reducer creates new state by utilising the previous state and action as arguments. We observed earlier that Redux updates state immutably, hence, reducers have to follow the same rules and make sure it is not modifying the previous state, rather it should create a copy of the state and make all the necessary changes in the newly copied state. Reducers are fairly easy logically – the state will only be changed when the logic of the application allows it to. If that is not the case, the existing state will be returned.

Example of a reducer:

const initialState = {value:0} //The initial state is initialized to null (zero) 
function likesReducer(state=initialState, action){
  if(action.type === ‘likes/increment’){
     //Let the action be a user clicking the like button to increase the number of likes 
     return {
       …state, //create a copy of the existing state object 
       value: state.value + 1 //update the value of the state in the new state object 
    }
  }
  return state //in case the action is not to increment the number of likes, nothing happens
}

6. Redux Store: Store is the object which contains all the currently existing states. The current states are managed to bypass the reducer as an argument and the state is obtained by a method getState.

Example of a store:

import {configureStore} from ‘@reduxjs/toolkit’
const store = configureStore({reducer: likesReducer})
To get the current state use, store.getState()

7. Redux Dispatch: Dispatch is the store method which gives a signal to the application to the change the state. The action to be performed is passed in as the argument. It is only after the dispatch function is called, any changes occur in a state.

Examples of a dispatch call:

store.dispatch({type: ‘likes/increment’}) //passing an action as argument 
store.dispatch(addNews()) //passing an action creator as argument

8. Redux Selector: Selectors are used to extract information from states stored in the store.

Example of a selector:

const selectLikesValue = state => state.value //selector 
const currentLikesValue = selectLikesValue(store.getState())

Now you are aware of all the core concepts of Redux. You have received a head start; you can go on to learning Redux on your own now.

Happy Learning!  

By Pooja Gera