How to implement redux in React js(Updated 2024)

82

Integrating Redux into your React app simplifies how you manage state and improves component interactions via props. This guide will show you how to pass props in a React app with Redux easily and how to add new reducers as your app grows.

What is redux in react JS?

Redux is a powerful state management library that simplifies managing your app’s state from one central location. Combined with React, Redux ensures information moves clearly and predictably through your app.

By allowing any component direct access to the state, Redux solves React’s prop-drilling issue, removing the need to thread the state through several layers of components as props.

Understanding Core Concepts of Redux

Redux introduces a few key concepts:

• Redux Store: The Redux Store is where the application’s state is kept.
• Actions: JavaScript objects that send data from the application to the store.
• Reducers: Pure functions define how the application’s state changes in response to actions.

Guide Using Redux in React

Step 1: Setting Up Your Environment

Ensure you have Node.js installed and a basic understanding of React. Start by creating a new React project and install Redux and React-Redux:

npx create-react-app redux-demo
cd redux-demo
npm install redux react-redux

Step 2: Structuring Your Redux Store in React Application

Organizing your files this way keeps your code organized and scalable:

redux-demo/
|-- src/
    |-- redux/
        |-- actions/
            |-- actionTypes.js
            |-- counterActions.js
        |-- reducers/
            |-- counterReducer.js
            |-- index.js
        |-- store.js
    |-- components/
        |-- Counter.js

Step 3: Setting Up Redux files 

Redux Actions setup

Create Action Types

File: src/redux/actions/actionTypes.js

This file defines the constants for your action types to prevent typos in action names.

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

You can define more action types as your application needs.

Create Actions

File: src/redux/actions/counterActions.js

Actions are functions that return an action object. They specify the type of action to be taken.

import * as actionTypes from './actionTypes';

export const incrementCounter = () => ({
  type: actionTypes.INCREMENT,
});

export const decrementCounter = () => ({
  type: actionTypes.DECREMENT,
});

You can define more actions as your application needs as we defined above counterActions for increment or decrement of the counter.

Redux Reducers setup

File: src/redux/reducers/counterReducer.js

Reducers specify how the state changes in response to actions sent to the store.

import * as actionTypes from '../actions/actionTypes';

const initialState = {
  count: 0,
};

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

export default counterReducer;

File: src/redux/reducers/index.js

Combines all reducers into a single root reducer.

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

Create the Store

File: src/redux/store.js

This is where you create the Redux store that holds the complete state tree of your app.

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Step 4: Connecting Redux to React Components

Counter Component

File: src/components/Counter.js

This component connects to the Redux store and can dispatch actions.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { incrementCounter, decrementCounter } from '../redux/actions/counterActions';

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(incrementCounter())}>Increment</button>
      <button onClick={() => dispatch(decrementCounter())}>Decrement</button>
    </div>
  );
};

export default Counter;

Adding More Actions

To add more actions:

• Define the action type in actionTypes.js.
• Create the action in counterActions.js or another relevant action file.
• Update the reducer to handle the new action in counterReducer.js.

This structured approach allows you to easily scale your Redux implementation by adding new actions and handling them in reducers as your application’s functionality grows.

Conclusion

By implementing Redux in your React JS application, you can significantly improve how the state is managed and how components interact through props. This guide has walked you through setting up Redux, creating and using actions and reducers, and how to expand your Redux store with additional features.

Redux in react – FAQ