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.w3wiki.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'
    }
}

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:

Table of Content

Benefits of using React-Redux over plain Redux
Using Higher-Order Components (HOCs)
Using React-Redux Hooks:

Steps to Create a React App and Installing Module

Benefits of using React-Redux over plain Redux

Similar Reads

Contact Us