What is Redux in React? Advantages, Architecture & Components of Redux

Redux in React

Redux in React

Redux : 

Redux is a cross-platform open-source javascript library that helps to manage the state of each component of your application. In addition, it provides a centralized place to write all our state logic inside reducers.
It was launched in June 2015.

Redux is an independent library on any UI. It can be used with any UI framework or library.

React Redux : 

It is the official react UI layer for the redux binding. It allows reacting components to read data from a redux store. And also, it can dispatch the actions from elements to the store if we want to update our state.

Advantages of Redux : 

  1. Predictable: It helps browsers behave consistently in all environments like client and server etc.
  2. Centralized: It provides a centralized location where we can write all our state and logic
  3. Debugging: It also helps in debugging because it uses “time-travel-debugging” and sends complete error reports to the server.
  4. Flexible: Redux works with all types of UI.
  5. Performance optimization: If we want to optimize the app’s performance, we need to skip all those unnecessary re-renders of web apps. Apps should only re-render if the data has changed. React redux implements many performance optimizations internally, and because of that, our web app component will re-render only if it is needed.

Installation of React Redux :

To install react redux. We have to run the following commands :

npm /yarn install react-redux redux

The architecture of Redux : 

When should use Redux in React :

A more extensive application is going to have so many components. Some data need to be shared in detail. So instead of passing data from one piece to another, we will create a shared store. So, when a member needs data, it can be directly obtained from that centralized app store.

In react, you can not pass data directly to sibling components. Instead, you must give data by callback in the parent component first. Then, you can provide the data to another child component from that parent component. React supports one-way data binding, so we need to deliver it with call back function. So that in react, child component data will be stored in the parent component.

This is easy to do if we are making some small application. But if you are creating an actual application, it will have many components. That’s why passing state and methods from one member to another will be a pain in the neck. Therefore, react-redux provides us with a global store, which is accessible by all components directly, and we can store all our states in this store.

Components of Redux :

1.Store : 

We write down logic for each function, like anything about the user in userSlice or product related in productSlice.

We write all functionality in reducers and export all functionality separately through actions.

import { configureStore } from ‘@reduxjs/toolkit’

export default configureStore({

  reducer: {}

})

We have to import “configure store”  from ‘reduxjs/toolkit’ and write down our reducers in the following manners.

2.Store Slice : 

import { createSlice } from ‘@reduxjs/toolkit’;

export const counterSlice = createSlice ({ 

name: ‘counter,’

initialState: {

value : 0,

},

reducers: { 

increment : ( state ) => {

       state.value = state.value + 1

}

decrement : ( state ) => {

       state.value =  state.value – 1

}

}

});

We have to export every reducers in the following manner : 

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

3.Provider​ : 

React Redux includes a <Provider /> component, which makes the Redux store available to the rest of your app

import React from ‘react’;

import ReactDOM from ‘react-dom/client’;

import { store } from ‘./store’;

import { Provider } from ‘react-redux’;

Import App from ‘./App’;

const root = ReactDOM.createRoot ( document.getElementById (  ‘rootHtmlFile’ ))

root. render(

  <Provider store={store}>

    <App />

  </Provider>

)

4.useSelector & useDispatch :

We have two react-redux hooks which help to interact with components. 

With the help of useSelector hooks, we can fetch data from the global store and utilize it in our app components. And with the service of useDispatch, we can dispatch our actions from members and update them in the global store.

useSelector reads a value from the store state and subscribes to updates, while useDispatch returns the store’s dispatch method to let you dispatch actions.

import React from ‘react.’

import { useDispatch, useSelector } from ‘react-redux’

import { increment, decrement } from ‘./counterSlice’

import styles from ‘./Counter.module.css.’

export function Counter() {

  const count = useSelector((state) => state.counter.value)

  const dispatch = useDispatch()

  return (

    <div>

      <div>

        <button

          aria-label=”Increment value.”

          onClick={() => dispatch(increment())}

        >

          Increment

        </button>

        <span>{count}</span>

        <button

          aria-label=”Decrement value.”

          onClick={() => dispatch(decrement())}

        >

          Decrement

        </button>

      </div>

    </div>

  )

}

Usage With TypeScript :

Redux Toolkit is written in TypeScript, and its API is designed to enable great integration with TypeScript applications. It works the same way as it does with javascript, only different in the syntax of the typescript.

Conclusion

Redux is a state management library for any application. It will be required when building any more significant application, so you can easily manage your state and write clean code. To summarise what we have learned so far:

    • React uses useSelector and useDispatch hooks to fetch and store data in our application.
    • It uses the global store, which contains all the states.
    • It allows you to get a state in components directly. You don’t have to pass props for that.
    • Redux Toolkit is the new layer for using redux in React UI.
    • Redux helps in optimization, productivity, writing clean code, etc.
Summary
Article Name
What is Redux in React? Advantages, Architecture & Components of Redux
Description
Redux in React is a cross-platform open-source independent library on any UI. It provides a centralized place to write all our state logic inside reducers.
Author
Publisher Name
BugendaiTech Pvt Ltd
Publisher Logo
Spread the updates
November 4, 2022
|

Leave a reply