A Guide To Core Redux: Definition & 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:

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