Практика

Після налаштування store його можна використовувати в додатку. Необхідно надати store всьому додатку. Це робиться у файлі 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>
);

Пояснення коду: Інтеграція Redux store у React-додаток за допомогою бібліотеки react-redux. Розглянемо це поетапно.

• Рядок 3: Імпорт компонента Provider з бібліотеки react-redux;
• Рядок 5: Імпорт об'єкта store з файлу store.js, який знаходиться у папці redux;
• Рядки 9-13: Компонент Provider обгортає компонент App. Компонент Provider — це компонент вищого порядку з бібліотеки react-redux, який робить Redux store доступним для компонентів додатку;
• Рядок 9: Об'єкт store передається як пропс до компонента Provider. Цей пропс має назву store, і його значення — імпортований об'єкт store.