Förståelse av Actions och Action Creators

Teori

Åtgärder är informationsbärare som beskriver de förändringar vi vill göra i tillståndet. Åtgärdsskapare är funktioner som skapar åtgärder. De kapslar in logiken för att skapa åtgärder och kan återanvändas i hela applikationen.

Praktik

Vi har en fil som heter counterAction.js i mappen 'actions'. Denna fil definierar åtgärder och åtgärdsskapare för räknarfunktionaliteten.

import { createAction } from "@reduxjs/toolkit";

export const increment = createAction("counter/increment");
export const decrement = createAction("counter/decrement");

Kodförklaring:

• Rad 1: Importera funktionen createAction från paketet @reduxjs/toolkit. Denna funktion förenklar skapandet av åtgärdsskapare;
• Rad 3: Skapa åtgärdsskaparfunktionen increment med hjälp av createAction. Denna funktion genererar åtgärder för att öka räknaren;
  • Strängen "counter/increment" som anges som argument representerar åtgärdstypen. Den hjälper till att identifiera åtgärden när den skickas.
• Rad 4: På liknande sätt, skapa åtgärdsskaparfunktionen decrement med hjälp av createAction. Denna funktion genererar åtgärder för att minska räknaren.
  • Strängen "counter/decrement" representerar åtgärdstypen för minskning.

Genom att använda createAction genererar dessa funktioner åtgärdsobjekt med en type-egenskap satt till den angivna typsträngen. Dessa åtgärder kan skickas i Redux-reducers eller React-komponenter för att uppdatera Redux-lagret.

Obs

Strängar för åtgärdstyper, såsom "counter/increment" och "counter/decrement", bör vara beskrivande och återspegla syftet med åtgärden. Det är vanligt att prefixa åtgärdstypen med funktions- eller slice-namnet för bättre organisering. Att använda strängkonstanter eller variabler rekommenderas för konsekvens och enklare omstrukturering.