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
Quizzes & Challenges
Quizzes
Challenges
/
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

Awesome!

Completion rate improved to 4.17

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