Oefening

Zodra de store is geconfigureerd, kan deze in de app worden gebruikt. We moeten de store beschikbaar maken voor de gehele app. Dit doen we in het bestand 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>
);

Code-uitleg: Integratie van de Redux store in een React-app met behulp van de react-redux bibliotheek. Laten we het stap voor stap bekijken.

• Regel 3: Importeer het Provider component uit de react-redux bibliotheek;
• Regel 5: Importeer het store object uit een bestand genaamd store.js, dat zich bevindt in een map genaamd redux;
• Regel 9-13: Het Provider component omhult het App component. Het Provider component is een higher-order component geleverd door react-redux die de Redux store beschikbaar maakt voor de componenten in de app;
• Regel 9: Het store object wordt als prop doorgegeven aan het Provider component. Deze prop heet store en de waarde is het geïmporteerde store object.