Theorie

In Redux fungeert de store als de enige bron van waarheid voor de status van een applicatie. Het bevat de volledige staatboom en is onveranderlijk. Om de status aan te passen, moeten acties worden verstuurd. Met behulp van de functies en hooks van Redux Toolkit is het eenvoudig om toegang te krijgen tot de store en deze te wijzigen.

Praktijk

Het bestand store.js is aangemaakt in de map redux. We zijn klaar om de volledige store op te zetten. Hier is een voorbeeld van hoe dit gedaan kan worden:

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

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

export default store;

Uitleg van de code: Deze code configureert de Redux store met behulp van de configureStore functie uit het @reduxjs/toolkit pakket. Hieronder volgt een stapsgewijze uitleg.

• Regel 1: De code importeert de configureStore functie uit het @reduxjs/toolkit pakket. Deze functie vereenvoudigt het aanmaken van een Redux store door standaardinstellingen en ingebouwde middleware te bieden;
• Regel 2 importeert de counterReducer uit het bestand ./reducers/counterReducer. Deze reducerfunctie verwerkt de statuswijzigingen voor de "counter"-slice van de Redux store. De logica in dat bestand wordt later aangemaakt;
• Regel 4-8: De configureStore functie wordt aangeroepen met een object als argument. Dit object specificeert de configuratieopties van de store. In dit geval is de reducer optie de enige optie (regel 5);
  • De reducer optie is een object dat de statusdelen koppelt aan hun bijbehorende reducerfuncties. In dit geval wordt het counter-deel van de status gekoppeld aan de counterReducer functie;
  • De configureStore functie retourneert een Redux store-object dat de applicatiestatus bevat en methoden biedt om ermee te werken.
• Regel 10: Tot slot wordt het store object als standaard export van deze module geëxporteerd, zodat het in andere delen van de applicatie gebruikt kan worden.

Opmerking

Samengevat stelt deze code een Redux store in met een enkele "counter" slice van de state, waarbij de counterReducer wordt gebruikt om wijzigingen in de state af te handelen. De resulterende store wordt vervolgens geëxporteerd voor gebruik in andere delen van de applicatie.