Harjoittelu

Kun store on konfiguroitu, sitä voidaan käyttää sovelluksessa. Meidän täytyy tarjota store koko sovellukselle. Teemme tämän tiedostossa 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>
);

Koodin selitys: Redux-storen integrointi React-sovellukseen käyttämällä react-redux-kirjastoa. Käydään läpi vaihe vaiheelta.

• Rivi 3: Tuodaan Provider-komponentti react-redux-kirjastosta;
• Rivi 5: Tuodaan store-olio tiedostosta nimeltä store.js, joka sijaitsee kansiossa nimeltä redux;
• Rivillä 9-13: Provider-komponentti ympäröi App-komponentin. Provider on korkeamman tason komponentti, jonka react-redux tarjoaa ja joka tekee Redux-storen saataville sovelluksen komponenteille;
• Rivi 9: store-olio annetaan propina Provider-komponentille. Tämä prop on nimeltään store ja sen arvo on tuotu store-olio.