How to use React Bootstrap with Redux

React Bootstrap and Redux are two popular libraries in web development. React Bootstrap provides UI components based on the Bootstrap framework, while Redux is a state management library for JavaScript applications. When used together, React Bootstrap and Redux can create powerful and scalable web applications.

Prerequisites

Before we dive into the integration process, ensure that you have the following prerequisites installed:

  • Npm or yarn

  • Node.js

  • React

If you don't have the prerequisites installed, you can refer to this tutorial: How to Set Up React on Windows.

After setting up react project, you can follow the steps below:

Step 1: Installing React Bootstrap

Install React Bootstrap using npm or yarn.

  • You can install react-bootstrap using npm by running the following command in the project directory:

npm install react-bootstrap bootstrap

  • You can also install react-bootstrap using yarn by running the following command:

yarn add react-bootstrap bootstrap

Step 2: Installing Redux

Install Redux using npm or yarn.

  • Using npm:

npm install redux

  • Using yarn:

yarn add redux

Step 3: Setting up the Redux store

Set up the Redux store for managing your application state.

  1. Install React Redux using npm or yarn.

  • Using npm:

npm install redux react-redux

  • Using yarn:

yarn add redux react-redux

  1. Create a new file called store.js and import the necessary dependencies:

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

  1. Create the Redux store by passing your root reducer to the createStore function:

const store = createStore(rootReducer);
export default store;

Step 4: Connecting components to the Redux store

After setting up the Redux Store, you need to identify the components in your application that requires state management with Redux. Let’s assume you have a TodoList component that displays a list of to-dos using React Bootstrap. Here’s how you can connect it to the Redux store:

  1. Import the connect function from the react-redux package.

import { connect } from 'react-redux';

  1. Define your component and wrap it with the connect function.

class TodoList extends React.Component {
  // Component code here
}
export default connect()(TodoList);

Step 5: Defining actions and reducers

To update the state in the Redux store, you need to define actions and reducers. Let’s consider the example of adding a new to-do item:

  1. Create an actions.js file and define an action creator for adding a to-do.

export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: text,
  };
};

  1. Create a reducers.js file and define the root reducer that handles the state updates.

const initialState = {
  todos: [],
};
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    default:
      return state;
  }
};
export default rootReducer;

Step 6: Dispatching actions

To dispatch actions from your connected component, you can utilize the dispatch function provided by react-redux. Let’s update the TodoList component to dispatch the addTodo action:

  1. Import the addTodo action creator.

import { addTodo } from './actions';

  1. Add a method to handle the addition of a new to-do.

handleAddTodo = () => {
  this.props.dispatch(addTodo('New todo item'));
};

  1. Connect the addTodo action creator to the component using the mapDispatchToProps function.

const mapDispatchToProps = {
  addTodo,
};
export default connect(null, mapDispatchToProps)(TodoList);

Step 7: Run the application

Run the application by following the command.

npm start

To run the sample application, execute the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <title>React Redux Form</title>
  </head>

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
To-do app using react-bootstrap with redux

Explanation

This project demonstrates how to use React Bootstrap components in a React Redux application. The Form.Control, ListGroup, and Button components from React Bootstrap are used to handle input, display the list, and trigger actions respectively. The connect function from React Redux is used to connect the component to the Redux store, allowing access to the state and dispatching actions.

Let's go through the TodoList.js file:

  • Inside the render method:

    • Form.Control is a React Bootstrap component used to create an input field for entering a new to-do item. It uses the component's state.newTodo value as the value prop and the handleChange method as the onChange prop to update the state.

    • ListGroup is a React Bootstrap component used to display the list of to-dos. The todos array from the component's props is mapped to the ListGroup.Items using map(). Each to-do item is rendered inside a ListGroup.Item component.

    • Button is a React Bootstrap component used to add a new to-do item. The handleAddTodo method is triggered when the button is clicked.

  • const mapStateToProps = (state) => { ... }: This function maps the todos property from the Redux store's state to the component's props. It enables access to the todos array this.props.todos within the component.

  • const mapDispatchToProps = { addTodo }: This object maps the addTodo action creator to the component's props, making it accessible as this.props.addTodo within the component.

  • export default connect(mapStateToProps, mapDispatchToProps)(TodoList): This line connects the component to the Redux store using the connect function from React Redux. It wraps the TodoList component and provides it with the Redux store's state and the mapped actions as props. This allows the component to access the state and dispatch actions to the store.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved