Concepts of Redux

Benefits of Redux

Here are some of the benefits of the concepts of redux:

• Centralised state management and produced scalable applications.
   
• The state of the application is frequently updated. 
   
• Time-travel debugging for more straightforward issue diagnosis.
   
• It improved code maintainability and organisation.

Redux Libraries and Tools

Redux is a javascript library that is used along with different other packages to provide more features. Such libraries are:

React-Redux

Redux can be used with any UI framework but it is most commonly used with React. React-Redux is the official package which allows interaction with a Redux store by reading pieces of state and dispatching actions to update the store.

Redux Toolkit

Redux Toolkit is used for writing Redux logic. It includes packages and functions that are essential for developing a Redux app. Redux Toolkit incorporates our recommended best practices, simplifies most Redux tasks, avoids common errors, and makes it easier to write Redux applications.

Redux DevTools Extension

The Redux DevTools Extension displays a history of state changes in the Redux store over time. This allows effective debugging of the applications and the use of powerful techniques like "time-travel debugging."

Redux Core Concepts

Let's look into the core concepts of redux and see how they interact to create a robust and maintainable state management solution.

Single Source of Truth

Redux follows a single source of truth which state that the entire application state is managed and stored in a single javascript object known as “store”. This store is immutable and represents the global state of an application and any changes in the application are done by dispatching actions. Dispatching actions are nothing but plain javascript objects that describe what happened.

Redux State Management
Let’s continue with our example of the news website. 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.

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.

Immutability

Mutable objects are those that can be changed, whereas immutable objects are those that cannot be changed. Objects and arrays in JavaScript are mutable by default. After creating an object, users can change the contents of its fields. The same is applicable to arrays too:

const initial_Obj = { x: 1, y: 2 };

// Although the contents of the object have changed, it is still the same object outside
const updated_Obj = { ...initial_Obj, y: 13 };

const initial_Arr = ['x', 'y'];

// Similarly, the contents of the array can be changed too
const updated_Arr = [...initial_Arr, 'z'];
updated_Arr[1] = 'a';

You can also try this code with Online Javascript Compiler

Run Code

The above concept shown is known as mutating the object or array. The memory contains the same object or array reference, but the contents inside them have changed.

The code will need to copy existing arrays or objects and then modify the copies to update values immutably.

Note: All state updates in Redux are expected to be done immutably. 

Redux Actions

Actions are payloads of information that describe the type of event that happened in the application. They are plain objects with a required "type" property and optional additional data. Whenever something happens in the application, like clicking the button then, an action is dispatched to the Redux store.

An example of a typical action object is given below:

const addNinjaAction =
{
  type: 'NinjaList/ninjaAdded',
  payload: Specialist DSA'
}

You can also try this code with Online Javascript Compiler

Run Code

Redux Reducers

Reducers are pure functions, that can specify how the application's state should change in response to actions. They take the current state and an action as input and produce a new state as output. 

Reducers should not modify the existing state but instead, create a new state object based on the changes described in the action. These reducers are used by Redux to handle actions and update the state accordingly.

An example of a typical reducers function is given below:

const initialState = { val: 0, message: "Namaste, Ninja Coder!" };

function Reducer(state = initialState, action) {
  switch (action.type) {
    case 'counter/increment':
      return {
        ...state,
        val: state.val +1
      };
    case 'message/updated':
      return {
        ...state,
        message: action.payload
      };
    default:
      return state;
  }
}

You can also try this code with Online Javascript Compiler

Run Code

Redux Store

The store acts as a central repository for dispatching actions and managing reducers. It is an object that holds the application state. The store is responsible for maintaining the current state and provides methods like getState() to access the state, dispatch() to send actions and subscribe() to listen for state changes.

A code snippet of a typical store is given below:

import { configureStore } from '@reduxjs/toolkit';

const initialState = { value: 10, message: "Coding Ninja" };
function Reducer(state = intialState, action){
	//Write the conditions as required
}

const myStore = configureStore({ reducer: Reducer });
console.log(myStore.getState()); // { value: 10, message: "Coding Ninja" }

You can also try this code with Online Javascript Compiler

Run Code

Redux Dispatch

The dispatch method in the Redux store sends the action to the store. It can be considered as a triggering event which triggers the state update process. The reducer function of the store will run, and a new state value will be saved inside. Then, we can call getState() in order to get the updated value.

A code snippet of a typical dispatch method is given below:

store.dispatch({ type: 'counter/increment' })
console.log(store.getState())
// {value: 10}

You can also try this code with Online Javascript Compiler

Run Code

Redux Selectors

Selector functions are used to extract specific parts of data from the state value of the store. It helps in preventing repetitive logic when the app gets bigger as different parts of the app need to read the same data.

An example of a typical selector function is given below:

const selectCountValue = state => state.value
const curr_val = selectCountValue(store.getState())
console.log(curr_val)
// 18

You can also try this code with Online Javascript Compiler

Run Code

Redux Application Data Flow

Let’s see the main steps of the Redux application data flow:

• Actions: Actions are dispatched to the Redux store.
   
• Reducers: Reducers specify how the state should change based on the dispatched actions.
   
• Store: The store holds the application state and dispatches actions to the reducers.
   
• State Update: Reducers create a new state object based on the dispatched actions.
   
• New State: The store updates the application state with the newly generated state.
   
• Component Interaction: Components can access the updated state from the store and dispatch actions to update the state.
   

By following the above steps, Redux ensures a controlled and predictable flow of data within the application.

Frequently Asked Questions

When to use concepts of Redux in projects?

Using Redux is helpful in case we need complex state management where multiple components are sharing the data or if we need time travel debugging.

Is Redux limited to React Applications?

Redux is not just limited to React only. In fact, it is the standalone state management library which can be used in any projects of javascript-related frameworks or libraries.

Are Reducers the only way to update the state of the Application?

We can take the help of middleware to update the state in redux, like using middleware to intercept the actions and then perform additional logic before reaching the reducers. Still, the primary way is using reducers only.

Conclusion

Congratulations, you did a fantastic job!! This article has gone through the concepts of Redux and discussed various terms like actions, reducers, store etc, with the help of code examples. At last, some frequently asked questions have been discussed.

I hope you enjoyed reading this article on the concepts of redux. Here are some more related articles:

• Using Redux with UI and React 
• Async Logic and Data Fetching in Redux
• usereducer 

Check out The Interview Guide for Product Based Companies and some famous Interview Problems from Top Companies, like Amazon, Adobe, Google, etc., on Coding Ninjas Studio.

Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, Interview Bundles, and some Interview Experiences curated by top Industry Experts only on Coding Ninjas Studio.

We hope you liked this article.

"Have fun coding!”