Teori

I Redux fungerer store som den eneste sannhetskilden for tilstanden til en applikasjon. Den inneholder hele tilstandstreet og er uforanderlig. For å endre tilstanden må handlinger sendes (dispatches). Ved å bruke funksjoner og hooks fra Redux Toolkit kan du enkelt få tilgang til og endre store.

Praksis

Vi har opprettet filen store.js i mappen redux. Vi er klare til å sette opp hele store. Her er et eksempel på hvordan det kan gjøres:

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

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

export default store;

Kodeforklaring: Denne koden konfigurerer Redux store ved å bruke funksjonen configureStore fra pakken @reduxjs/toolkit. La oss gå gjennom det steg for steg.

• Linje 1: Koden importerer funksjonen configureStore fra pakken @reduxjs/toolkit. Denne funksjonen forenkler prosessen med å opprette en Redux store ved å tilby fornuftige standardverdier og innebygd middleware;
• Linje 2 importerer counterReducer fra filen ./reducers/counterReducer. Denne reducer-funksjonen håndterer tilstandsforandringer for counter-delen av Redux store. Logikken i denne filen vil bli laget senere;
• Linje 4-8: Funksjonen configureStore kalles med et objekt som argument. Dette objektet spesifiserer konfigurasjonsalternativene for store. I dette tilfellet er reducer det eneste alternativet (linje 5);
  • Alternativet reducer er et objekt som kobler tilstandsdeler til deres respektive reducer-funksjoner. I dette tilfellet er counter-delen av tilstanden koblet til funksjonen counterReducer;
  • Funksjonen configureStore returnerer et Redux store-objekt som inneholder applikasjonens tilstand og gir metoder for å samhandle med den.
• Linje 10: Til slutt eksporteres store-objektet som standardeksport fra denne modulen slik at det kan brukes i andre deler av applikasjonen.

Merk

Oppsummert setter denne koden opp en Redux-butikk med en enkelt "counter"-del av tilstanden, hvor counterReducer håndterer tilstands­endringer. Den resulterende butikken eksporteres deretter for bruk i andre deler av applikasjonen.