Integrating the Redux Store Into the React App

Practice

Once the store is configured, it can be used in the app. We have to provide the store to the entire app. We will do it in the index.js file.

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App/App";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

Code explanation: Integration of the Redux store into a React app using the react-redux library. Let's break it down step by step.

• Line 3: Import the Provider component from the react-redux library;

• Line 5: Import the store object from a file called store.js , located in a folder called redux;

• Line 9-13: The Provider component wraps the App component. The Provider component is a higher-order component provided by react-redux that makes the Redux store available to the components in the app;

• Line 9: The store object is passed as a prop to the Provider component. This prop is named store, and its value is the imported store object.