Introduction to React-Redux

React-Redux is a popular state management library that helps manage the application state in React applications. It is an essential tool in the React ecosystem, allowing you to efficiently handle complex state logic and data flow within large applications. React-Redux connects the Redux store to React components, enabling seamless communication between the two.

Before diving into React-Redux, it’s important to understand what Redux is and why it’s used.

What is Redux?

Redux is a predictable state container for JavaScript applications. It helps manage an application’s state in a centralized way, making it easier to maintain and debug, especially as the app grows in complexity.

It is based on three fundamental principles:

1. Single Source of Truth: The entire application state is stored in a single JavaScript object called the store.
2. State is Read-Only: The only way to change the state is by dispatching an action that describes the change.
3. Changes are Made with Pure Functions: Changes to the state are made using reducers, which are pure functions that take the previous state and an action, and return the new state.

Why Use React-Redux?

React-Redux serves as the official library for connecting Redux with React. Here are some reasons why developers choose to use React-Redux:

• Simplifies State Management: React-Redux simplifies state management by providing a structured approach to handle state changes. It allows you to manage the entire state in one place, making it easier to track changes across your application.
• Predictable State Flow: Redux makes state changes predictable, which is crucial for debugging and maintaining large-scale applications. The state can only change through actions, and those actions are processed by reducers, making the flow of data transparent.
• Decouples Components from State Management: With React-Redux, you can decouple the UI components from the state logic. This means components focus on rendering the UI while Redux manages the application state.
• Easier Debugging: React-Redux enables tools like Redux DevTools that allow you to inspect, log, and replay state changes, making debugging easier.
• Performance Optimizations: React-Redux uses shallow equality checks to optimize re-renders. It prevents unnecessary re-renders by ensuring that components only update when the relevant state changes.

Core Concepts of React-Redux

To effectively use React-Redux, you need to understand some key concepts:

1. Store

The store is a centralized object that holds the application state. It is the only place where the state can be modified.

2. Actions

An action is a plain JavaScript object that describes a change in the application state. It must have a type property and can optionally include a payload.

const incrementAction = {
    type: 'INCREMENT',
    payload: 1
};

3. Reducers

A reducer is a pure function that specifies how the application’s state changes in response to an action. It takes the current state and an action as arguments and returns a new state.

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + action.payload;
        case 'DECREMENT':
            return state - action.payload;
        default:
            return state;
    }
};

4. Dispatch

The dispatch function is used to send an action to the Redux store, triggering the reducer to process the state change.

store.dispatch(incrementAction);

5. Selectors

A selector is a function that retrieves specific pieces of state from the Redux store. It helps to abstract the state retrieval process, making it easier to access state in a more manageable way.

const selectCount = (state) => state.count;

6. Provider

The Provider component makes the Redux store available to all the components in the application. It should wrap the entire application so that any component can access the store.

import { Provider } from 'react-redux';

<Provider store={store}>
    <App />
</Provider>;

7. connect()

connect() is a function provided by React-Redux to connect React components to the Redux store. It allows the components to access the state and dispatch actions.

import { connect } from 'react-redux';

const Counter = ({ count, increment }) => (
    <div>
        <h1>{count}</h1>
        <button onClick={increment}>Increment</button>
    </div>
);

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

const mapDispatchToProps = (dispatch) => ({
    increment: () => dispatch({ type: 'INCREMENT', payload: 1 })
});

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

How React-Redux Works

React-Redux connects React components to the Redux store, ensuring smooth state management across your app. Here’s a simplified breakdown of how it works:

1. Setting Up the Store

The Redux store holds the entire state of your application. It’s created using createStore() and initialized with a reducer to define how the state changes.

const store = createStore(counterReducer);

2. Dispatching Actions

Actions are plain objects that describe changes in state. These actions are dispatched to inform Redux of a state change.

store.dispatch({ type: 'INCREMENT', payload: 1 });

3. Reducers Update the State

A reducer is a function that updates the state based on the action type. It takes the current state and action, then returns a new state.

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT': return state + action.payload;
        default: return state;
    }
};

4. Connecting Components with connect()

React-Redux’s connect() function connects React components to the Redux store, allowing components to access state and dispatch actions.

const mapStateToProps = (state) => ({ count: state });
const mapDispatchToProps = (dispatch) => ({
    increment: () => dispatch({ type: 'INCREMENT', payload: 1 })
});

5. Using Provider to Make Store Accessible

The Provider component makes the store available to all components in the app.

<Provider store={store}><App /></Provider>

6. Re-Renders and Reactivity

React-Redux ensures that only components dependent on updated state will re-render, optimizing performance.

Steps To Implement React-Redux

Step 1: Setting Up the Project

First, create a new React app using create-react-app:

npx create-react-app react-redux-countercd react-redux-counter

Next, install redux and react-redux:

npm install redux react-redux

Folder Structure

Folder Structure

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "web-vitals": "^2.1.4"
}

Step 2: Define Action Types

You need to define action types, which represent the actions that will update the state.

// src/redux/actionTypes.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

Step 3: Action Creators

Action creators are functions that return action objects.

// src/redux/actions.js
import { INCREMENT, DECREMENT } from "./actionTypes";

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

export const decrement = () => ({
    type: DECREMENT,
});

Step 4: Reducers

Reducers specify how the application’s state changes in response to actions. The reducer function receives the current state and action, and returns the updated state.

// src/redux/reducer.js
import { INCREMENT, DECREMENT } from "./actionTypes";

const initialState = {
    count: 0,
};

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

export default counterReducer;

Step 5: Create the Redux Store

Now, create the Redux store using the createStore function from Redux.

// src/redux/store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Step 5: Wrap the App with the Redux Provider

Next, wrap your entire application with the Redux Provider to make the store accessible to all components in the app.

/* src/index.css */

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

button {
    margin: 5px;
    padding: 10px;
    font-size: 16px;
}

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

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

import React from "react";
import Counter from "./components/Counter";

function App() {
    return (
        <div className="App">
            <h1>React-Redux Counter App</h1>
            <Counter />
        </div>
    );
}

export default App;

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../redux/actions";

const Counter = () => {
    const count = useSelector((state) => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch(increment())}>Increment</button>
            <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
};

export default Counter;

To start the application run the following command.

npm start

Output

Introduction to React-Redux

Conclusion

In this article, we explored React-Redux, which simplifies state management in React by centralizing the app’s state in a Redux store. Using Provider, connect(), and React-Redux hooks like useSelector and useDispatch, React components can easily access and update the global state. React-Redux helps improve state predictability, performance, and maintainability, especially in large-scale applications.

L

leelamanolatha6

Follow

Improve

Article Tags :

• JavaScript
• ReactJS
• Web Technologies
• React-Redux