Práctica

Una vez que la tienda está configurada, puede utilizarse en la aplicación. Es necesario proporcionar el store a toda la aplicación. Esto se realiza en el archivo 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>
);

Explicación del código: Integración de la tienda de Redux en una aplicación React utilizando la biblioteca react-redux. Analicemos el proceso paso a paso.

• Línea 3: Importación del componente Provider desde la biblioteca react-redux;
• Línea 5: Importación del objeto store desde un archivo llamado store.js, ubicado en una carpeta llamada redux;
• Líneas 9-13: El componente Provider envuelve al componente App. El componente Provider es un componente de orden superior proporcionado por react-redux que pone la tienda de Redux a disposición de los componentes de la aplicación;
• Línea 9: El objeto store se pasa como una prop al componente Provider. Esta prop se llama store y su valor es el objeto store importado.