Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Förståelse av Actions och Action Creators | Använda Redux Toolkit i React
Tillståndshantering med Redux Toolkit i React

bookFö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.

1. Vad är action creators i Redux?

2. Vad representerar strängen "counter/increment" i koden?

question mark

Vad är action creators i Redux?

Select the correct answer

question mark

Vad representerar strängen "counter/increment" i koden?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain what an action creator does in Redux?

Why should I use descriptive action type strings?

How do I use these action creators in a Redux reducer?

bookFörståelse av Actions och Action Creators

Svep för att visa menyn

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.

1. Vad är action creators i Redux?

2. Vad representerar strängen "counter/increment" i koden?

question mark

Vad är action creators i Redux?

Select the correct answer

question mark

Vad representerar strängen "counter/increment" i koden?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 6
some-alt