Pratique

Une fois le store configuré, il peut être utilisé dans l'application. Nous devons fournir le store à l'ensemble de l'application. Nous le ferons dans le fichier index.js.

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>
);

Explication du code : Intégration du store Redux dans une application React en utilisant la bibliothèque react-redux. Décomposons cela étape par étape.

• Ligne 3 : Importer le composant Provider de la bibliothèque react-redux ;
• Ligne 5 : Importer l'objet store à partir d'un fichier appelé store.js, situé dans un dossier appelé redux ;
• Lignes 9-13 : Le composant Provider enveloppe le composant App. Le composant Provider est un composant de haut niveau fourni par react-redux qui rend le store Redux disponible pour les composants de l'application ;
• Ligne 9 : L'objet store est passé en tant que prop au composant Provider. Cette prop est nommée store, et sa valeur est l'objet store importé.