Redux Toolkitiin Asentaminen ja Konfigurointi

Redux Toolkitiin tutustuminen alkaa sen sekä React-sidosten asentamisella.

Suorita seuraava komento projektissasi:

npm install @reduxjs/toolkit react-redux

Tämä asentaa kaiken tarvittavan kaupan (store) luomiseen ja sen yhdistämiseen React-sovellukseen.

Kaupan määrittäminen

Luo uusi tiedosto kaupalle. Yleinen sijainti on:

src/store/store.js

Tässä tiedostossa luodaan kauppa käyttämällä configureStore-funktiota:

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {}
});

Tässä vaiheessa kauppa on tyhjä. Lisää siihen reducert seuraavissa luvuissa.

Reduxin yhdistäminen Reactiin

Jotta kauppa olisi käytettävissä sovelluksessa, kääri juurikomponentti Provider-komponenttiin.

Avaa pääsisääntulotiedosto (esimerkiksi main.jsx tai index.js) ja päivitä se seuraavasti:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Nyt Redux-kauppa on käytettävissä jokaisessa komponentissa.