Benefits of using React-Redux over plain Redux

React-Redux streamlines state management in React applications by integrating seamlessly with Redux, eliminating prop drilling. It enhances predictability and scalability through centralized state management and facilitates the creation of reusable UI components. This integration optimizes syntax, approaches, and implementation steps, offering a robust solution for building dynamic web applications.

We will discuss two approaches of React Redux over plain Redux and their benefits:

Benefits of using React-Redux over plain Redux:

• Simplified state management through an intuitive connection of React components with the Redux store.
• Performance optimization via efficient updates only when relevant state or props change.
• Improved code organization by separating concerns between presentation and container components.
• Enhanced developer experience with convenient tools like connect() and hooks such as useSelector.
• Compatibility with various React ecosystem libraries and tools for seamless integration.
• Scalability and maintainability through reusable components and a single source of truth principle.

Using Higher-Order Components (HOCs)

With the introduction of Hooks, functional components can now directly interact with the Redux store. The useSelector Hook allows components to extract data from the Redux store, while the useDispatch Hook provides a way to dispatch actions.

Steps to Create a React App and Installing Module:

Step 1 : Make a React app using the following command.

npx create-react-app

Step 2 : Install the required modules and dependencies.

npm install react react-dom redux react-redux

Dependencies in package.json file

"dependencies": {
    "@reduxjs/toolkit": "^2.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0"
}

Example: Below is an example of using Higher order components:

CSS

/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#counter_head {
    font-size: 3rem;
    text-align: center;
}

#negative_btn {
    padding: 10px 20px;
    border-radius: 5px;
}

#positive_btn {
    padding: 10px 20px;
    border-radius: 5px;
}

#count_value {
    font-size: 2rem;
    color: green;
    font-weight: bold;
    margin: 10px;
    padding: 5px 0px;
}

#head_comp {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

#comp_1 {
    display: flex;
    justify-content: center;
    margin: 20px;
}

#comp_2 {
    display: flex;
}

JavaScript

// index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>,
    document.getElementById('root')
);

JavaScript

// Counter.js 

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './store';
import './style.css'

const Counter = ({ count, increment, decrement }) => {
    return (
        <div>
            <div id='head_comp'>
                <h2 id='counter_head'>Counter</h2>
                <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                    alt="gfg_logo" />
            </div>

            <div id='comp_1' >
                <div id='comp_2' >
                    <button onClick={decrement} 
                            id='negative_btn'>-</button>
                    <span id='count_value' >{count}</span>
                    <button onClick={increment} 
                            id='positive_btn' >+</button>
                </div>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        count: state.count,
    };
};

const mapDispatchToProps = {
    increment,
    decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

JavaScript

// store.js

import { createStore } from 'redux';

// Define the initial state
const initialState = {
    count: 0,
};

// Define the reducer function
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return {
                count: state.count + 1,
            };
        case 'DECREMENT':
            return {
                count: state.count - 1,
            };
        default:
            return state;
    }
};

// Create the Redux store
const store = createStore(counterReducer);

export default store;

export const increment = () => {
    return {
        type: 'INCREMENT',
    }
}

export const decrement = () => {
    return {
        type: 'DECREMENT'
    }
}

Using React-Redux Hooks:

React-Redux provides hooks like useSelector and useDispatch for functional components. useSelector enables components to select data from the Redux store state. useDispatch allows components to dispatch actions to update the Redux store. Hooks streamline state management in functional components, reducing reliance on higher-order components. They offer a more modern and concise way to interact with Redux within functional components. Developers can leverage React’s hooks API to integrate Redux seamlessly into their functional component workflows

Install the required modules and dependencies.

npm i react react-dom @reduxjs/toolkit react-redux

Example: Below is an example of using React-Redux Hooks

JavaScript

// Counter.js 

import React from "react";
import {
    useSelector,
    useDispatch
} from 'react-redux'
import './style.css'
import {
    increment,
    decrement
} from "./store";

export default function Counter() {
    const count = useSelector((state) => state.count)
    const dispatch = useDispatch()
    return (
        <div>
            <div id='head_comp'>
                <h2 id='counter_head'>Counter</h2>
                <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                    alt="gfg_logo" />
            </div>

            <div id='comp_1' >
                <div id='comp_2' >
                    <button
                        onClick={() => dispatch(decrement())}
                        id='negative_btn'>-
                    </button>
                    <span id='count_value' >{count}</span>
                    <button
                        onClick={() => dispatch(increment())}
                        id='positive_btn' >+
                    </button>
                </div>
            </div>
        </div>
    );
};

JavaScript

// store.js 

import { configureStore } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";


const initialState = {
    count: 0
}
const countSlice = createSlice({
    name: 'Count Slice',
    initialState,
    reducers: {
        increment: (state, action) => {
            state.count = state.count + 1;
        },
        decrement: (state, action) => {
            state.count = state.count - 1;
        },
    }
})

export default configureStore({
    reducer: countSlice.reducer
})

export const { increment, decrement } = countSlice.actions

JavaScript

// index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>,
    document.getElementById('root')
);

Output:

Browser Final Output