Theorie

Acties zijn informatieve payloads die de wijzigingen beschrijven die we willen aanbrengen aan de state. Actie-creators zijn functies die acties aanmaken. Zij kapselen de logica van het creëren van acties in en kunnen hergebruikt worden binnen de applicatie.

Praktijk

We hebben een bestand genaamd counterAction.js in de map 'actions'. Dit bestand definieert acties en actie-creators voor de tellerfunctionaliteit.

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

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

Uitleg van de code:

• Regel 1: Importeer de functie createAction uit het @reduxjs/toolkit-pakket. Deze functie vereenvoudigt het aanmaken van actie-creators;
• Regel 3: Maak de actie-creator functie increment aan met behulp van createAction. Deze functie genereert acties voor het verhogen van de teller;
  • De string "counter/increment" die als argument wordt meegegeven, vertegenwoordigt het actietype. Dit helpt bij het identificeren van de actie wanneer deze wordt verstuurd.
• Regel 4: Maak op vergelijkbare wijze de actie-creator functie decrement aan met behulp van createAction. Deze functie genereert acties voor het verlagen van de teller.
  • De string "counter/decrement" vertegenwoordigt het actietype voor het verlagen.

Door gebruik te maken van createAction genereren deze functies actie-objecten met een type-eigenschap die is ingesteld op de opgegeven typestring. Deze acties kunnen worden verstuurd in Redux-reducers of React-componenten om de Redux-store bij te werken.

Opmerking

Actietypestrings, zoals "counter/increment" en "counter/decrement", dienen beschrijvend te zijn en het doel van de actie weer te geven. Het is gebruikelijk om het actietype te voorzien van een prefix met de naam van de feature of slice voor een betere organisatie. Het gebruik van stringconstanten of variabelen wordt aanbevolen voor consistentie en eenvoudiger refactoren.