Teoria

Reduxissa store toimii sovelluksen tilan ainoana totuuden lähteenä. Se sisältää koko tilapuun ja on muuttumaton. Tilan muuttamiseksi täytyy lähettää toimintoja (actions). Redux Toolkitin funktioiden ja hookien avulla storeen pääsee helposti käsiksi ja sitä voi muokata.

Käytännön esimerkki

Olemme luoneet store.js-tiedoston redux-kansioon. Nyt olemme valmiita määrittämään koko storen. Tässä esimerkki toteutuksesta:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Koodin selitys: Tämä koodi määrittää Redux-storen käyttämällä configureStore-paketin tarjoamaa @reduxjs/toolkit-funktiota. Käydään se läpi vaiheittain.

• Rivi 1: Koodi tuo configureStore-funktion @reduxjs/toolkit-paketista. Tämä funktio helpottaa Redux-storen luomista tarjoamalla järkevät oletusasetukset ja sisäänrakennetun middleware-tuen;
• Rivi 2 tuo counterReducer-tiedoston ./reducers/counterReducer-polusta. Tämä reducer-funktio käsittelee "counter"-tilasiivun muutokset Redux-storessa. Tämän tiedoston logiikka luodaan myöhemmin;
• Rivit 4-8: configureStore-funktiota kutsutaan objektilla, joka määrittää storen asetukset. Tässä tapauksessa reducer-asetus on ainoa määritelty asetus (rivi 5);
  • reducer-asetus on objekti, joka yhdistää tilasiivut niiden vastaaviin reducer-funktioihin. Tässä tapauksessa counter-tilasiivu yhdistetään counterReducer-funktioon;
  • configureStore palauttaa Redux-store-olion, joka sisältää sovelluksen tilan ja tarjoaa menetelmät sen käsittelyyn.
• Rivi 10: Lopuksi store-olio viedään moduulin oletusvientinä, jotta sitä voidaan käyttää sovelluksen muissa osissa.

Huomio

Yhteenvetona tämä koodi luo Redux-kaupan, jossa on yksi "counter"-osio tilasta, käyttäen counterReducer-funktiota tilan muutosten hallintaan. Lopullinen store viedään käytettäväksi sovelluksen muissa osissa.