Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Redux-tallennustilan Integrointi React-sovellukseen | Redux-ToolKitin Soveltaminen Reactissa
Tilanhallinta Redux Toolkitilla Reactissa

bookRedux-tallennustilan Integrointi React-sovellukseen

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.

1. Mikä on Provider-kirjaston react-redux-komponentin tarkoitus?

2. Mikä prop käytetään Redux-kaupan välittämiseen Provider-komponentille?

question mark

Mikä on Provider-kirjaston react-redux-komponentin tarkoitus?

Select the correct answer

question mark

Mikä prop käytetään Redux-kaupan välittämiseen Provider-komponentille?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain what the Provider component does in more detail?

Why do we need to wrap the App component with Provider?

What happens if we don't provide the store to the Provider?

Awesome!

Completion rate improved to 4.17

bookRedux-tallennustilan Integrointi React-sovellukseen

Pyyhkäise näyttääksesi valikon

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.

1. Mikä on Provider-kirjaston react-redux-komponentin tarkoitus?

2. Mikä prop käytetään Redux-kaupan välittämiseen Provider-komponentille?

question mark

Mikä on Provider-kirjaston react-redux-komponentin tarkoitus?

Select the correct answer

question mark

Mikä prop käytetään Redux-kaupan välittämiseen Provider-komponentille?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 4
some-alt