Grunderna i useReducer och actionmönster
Lär er useReducer: state + reducer(state, action) → nästa state. Använd tydliga actions (type, payload) för uppdateringar av flera fält.
Grunderna i useReducer och actionmönster är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför useReducer?
Mål: Använd useReducer för att hantera uppdateringar med en enda reducerfunktion. Det är praktiskt när flera fält ändras tillsammans.
- State-objekt
- Actions: type + payload
- Ren reducer(state, action)
En reducers uppbyggnad
En reducer tar aktuell state och en action och returnerar nästa state. Håll den ren (inga sidoeffekter). Använd små action types som INCREMENT, RESET eller UPDATE_FIELD.
Demo: räknare med useReducer
En liten räknare visar loopen state → action → nästa state med useReducer.
<div id="root"></div>
Action-mönster
Håll actions enkla:
- type: ett kort verb (t.ex. UPDATE_FIELD)
- payload: nödvändiga data
- Valfria små action creators för att undvika stavfel
Demo: formulär med reducer
En formulärreducer hanterar flera fält med en enda UPDATE_FIELD-action. En plats styr alla uppdateringar.
<div id="root"></div>
Tips och fallgropar
Tips:
- Håll reducers rena och små.
- Samla relaterade fält i ett state-objekt.
- Använd tydliga action-namn och undvik många liknande fall.
Kontroll: val av useReducer
Sammanfattning
Sammanfattning: Definiera en ren reducer, skicka enkla actions och hantera uppdateringar av flera fält på en plats. Välj useReducer när flera värden ändras tillsammans.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Grunderna i useReducer och actionmönster” gratis?
Ja – hela texten till ”Grunderna i useReducer och actionmönster” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Grunderna i useReducer och actionmönster”?
Lär er useReducer: state + reducer(state, action) → nästa state. Använd tydliga actions (type, payload) för uppdateringar av flera fält. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Grunderna i useReducer och actionmönster”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i Context och att undvika prop drilling
- Grunderna i useReducer och actionmönster
- Context + Reducer: enkla tillståndsbehållare