Teori

I Redux fungerar butiken som den enda sanningskällan för applikationens tillstånd. Den innehåller det kompletta tillståndsträdet och är oföränderlig. För att ändra tillståndet måste åtgärder skickas. Genom att använda Redux Toolkits funktioner och hooks kan du enkelt komma åt och ändra butiken.

Praktik

Vi har skapat filen store.js i mappen redux. Vi är redo att konfigurera hela butiken. Här är ett exempel på hur det kan göras:

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

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

export default store;

Kodförklaring: Denna kod konfigurerar Redux-butiken med hjälp av funktionen configureStore från paketet @reduxjs/toolkit. Låt oss gå igenom det steg för steg.

• Rad 1: Koden importerar funktionen configureStore från paketet @reduxjs/toolkit. Denna funktion förenklar processen att skapa en Redux-butik genom att erbjuda förvalda inställningar och inbyggd middleware;
• Rad 2 importerar counterReducer från filen ./reducers/counterReducer. Denna reducer-funktion hanterar tillståndsförändringar för "counter"-delen av Redux-butiken. Logiken i den filen kommer att skapas senare;
• Rad 4-8: Funktionen configureStore anropas med ett objekt som argument. Detta objekt specificerar butikens konfigurationsalternativ. I detta fall är alternativet reducer det enda alternativet (Rad 5);
  • Alternativet reducer är ett objekt som mappar tillståndsdelar till deras motsvarande reducer-funktioner. I detta fall är counter-delen av tillståndet kopplad till funktionen counterReducer;
  • Funktionen configureStore returnerar ett Redux-butiksobjekt som innehåller applikationens tillstånd och tillhandahåller metoder för att interagera med det.
• Rad 10: Slutligen exporteras objektet store som standardexport från denna modul så att det kan användas i andra delar av applikationen.

Obs

Sammanfattningsvis sätter denna kod upp en Redux-butik med en enda "counter"-del av tillståndet, där counterReducer hanterar tillståndsförändringar. Den resulterande butiken exporteras sedan för användning i andra delar av applikationen.