Teori

Actions er informasjonsbærere som beskriver endringene vi ønsker å gjøre i tilstanden. Action creators er funksjoner som oppretter actions. De kapsler inn logikken for å lage actions og kan gjenbrukes i hele applikasjonen.

Praksis

Vi har en fil som heter counterAction.js i 'actions'-mappen. Denne filen definerer actions og action creators for teller-funksjonaliteten.

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

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

Kodeforklaring:

• Linje 1: Importerer funksjonen createAction fra pakken @reduxjs/toolkit. Denne funksjonen forenkler opprettelsen av action creators;
• Linje 3: Oppretter funksjonen increment som action creator ved å bruke createAction. Denne funksjonen genererer actions for å øke telleren;
  • Strengen "counter/increment" som gis som argument representerer action-typen. Den hjelper med å identifisere action når den sendes.
• Linje 4: På samme måte opprettes funksjonen decrement som action creator ved å bruke createAction. Denne funksjonen genererer actions for å redusere telleren.
  • Strengen "counter/decrement" representerer action-typen for å redusere.

Ved å bruke createAction genererer disse funksjonene action-objekter med en type-egenskap satt til den angitte type-strengen. Disse actions kan sendes i Redux-reducers eller React-komponenter for å oppdatere Redux store.

Merk

Handlings-type-strenger, som "counter/increment" og "counter/decrement", bør være beskrivende og reflektere hensikten med handlingen. Det er vanlig å prefiksere handlings-typen med funksjons- eller slice-navnet for bedre organisering. Det anbefales å bruke strengkonstanter eller variabler for konsistens og enklere refaktorering.