Teori

I Redux fungerer store som den eneste kilde til sandhed for applikationens tilstand. Den indeholder det komplette tilstandstræ og er uforanderlig. For at ændre tilstanden skal der sendes handlinger (actions). Ved at bruge Redux Toolkits funktioner og hooks kan du nemt tilgå og ændre store.

Praksis

Vi har oprettet filen store.js i mappen redux. Vi er klar til at opsætte hele store. Her er et eksempel på, hvordan det kan gøres:

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

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

export default store;

Kodeforklaring: Denne kode konfigurerer Redux store ved hjælp af funktionen configureStore fra pakken @reduxjs/toolkit. Lad os gennemgå det trin for trin.

• Linje 1: Koden importerer funktionen configureStore fra pakken @reduxjs/toolkit. Denne funktion forenkler processen med at oprette en Redux store ved at levere fornuftige standardindstillinger og indbygget middleware;
• Linje 2 importerer counterReducer fra filen ./reducers/counterReducer. Denne reducer-funktion håndterer tilstandsændringer for counter-delen af Redux store. Logikken i denne fil vil blive oprettet senere;
• Linje 4-8: Funktionen configureStore kaldes med et objekt som argument. Dette objekt angiver store's konfigurationsmuligheder. I dette tilfælde er reducer-muligheden den eneste mulighed (linje 5);
  • reducer-muligheden er et objekt, der kortlægger tilstandens slices til deres tilsvarende reducer-funktioner. I dette tilfælde er counter-delen af tilstanden kortlagt til funktionen counterReducer;
  • Funktionen configureStore returnerer et Redux store-objekt, der indeholder applikationens tilstand og giver metoder til at interagere med den.
• Linje 10: Til sidst eksporteres store-objektet som standardeksporten fra dette modul, så det kan bruges i andre dele af applikationen.

Bemærk

For at opsummere, konfigurerer denne kode en Redux store med en enkelt "counter"-slice af staten, hvor counterReducer håndterer tilstandsændringer. Den resulterende store eksporteres derefter til brug i andre dele af applikationen.