Context + Reducer: enkla tillståndsbehållare
Kombinera Context + useReducer för att bygga en liten tillståndsbehållare. Provider exponerar state och dispatch via en anpassad hook.
Context + Reducer: enkla tillståndsbehållare är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 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 Context + Reducer?
Mål: Paketera state-logik i en Provider (Context) + reducer. Barnkomponenter läser via en liten custom hook: ingen prop drilling, förutsägbara uppdateringar.
Designsteg
Mönster:
- Skapa Context
- I Provider: useReducer(state, action)
- Tillhandahåll {state, dispatch}
- Skapa en hook i stil med useCounter() som anropar useContext
Demo: räknarkontainer
En minimal CounterProvider exponerar state och dispatch; barn använder useCounter() för att läsa och uppdatera.
<div id="root"></div>
Råd om actions och API
Riktlinjer:
- Håll actions små (INC, DEC, RESET).
- Placera reducern tillsammans med Provider.
- Exportera endast den anpassade hooken så att konsumenterna förblir enkla.
Demo: todo-kontainer
En liten TodoProvider visar hur flera fält uppdateras förutsägbart med en reducer och ett rent hook-API.
<div id="root"></div>
Fallgropar och tips
Fallgropar:
- Att glömma att omsluta barnen med Provider.
- Att lägga stora objekt i Context – skicka bara det som behövs.
- Att mutera state i reducern – returnera alltid nya objekt.
Kontroll: container-mönstret
Sammanfattning
Sammanfattning: Context ger åtkomst; useReducer hanterar övergångar. Exportera en liten useXxx-hook för att läsa {state, dispatch} och hålla konsumenterna enkla.
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 ”Context + Reducer: enkla tillståndsbehållare” gratis?
Ja – hela texten till ”Context + Reducer: enkla tillståndsbehållare” 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 ”Context + Reducer: enkla tillståndsbehållare”?
Kombinera Context + useReducer för att bygga en liten tillståndsbehållare. Provider exponerar state och dispatch via en anpassad hook. 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 3 av 3.
Hur lång tid tar lektionen ”Context + Reducer: enkla tillståndsbehållare”?
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