Global hanterare för överlagringar (Context + Reducer)
Centralisera överlagringar med Context + Reducer: ett enda lager för modaler och toastmeddelanden med enkla actions som kan anropas var som helst.
Global hanterare för överlagringar (Context + Reducer) ä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 en global hanterare?
Mål: Hantera alla överlägg från en enda plats.
- Context tillhandahåller åtgärder
- Reducer hanterar tillstånd
- Modaler staplas och toast-meddelanden köas
Designregler
- Håll ett enda store för överlägg
- Exponera openModal/closeTop/showToast
- Rendera lager via en Portal
- Behåll grunderna i a11y: role="dialog", Escape/bakgrund
Store: context + reducer
Skapa en liten store: stackar för modala fönster och toastmeddelanden; enkla actions.
<div id="root"></div>Använda managern från komponenter
Alla komponenter anropar openModal / showToast; ingen prop drilling.
<div id="root"></div>Stackning och Escape för att stänga det översta
Stöd en stack: öppna ytterligare ett modalt fönster inifrån; Escape stänger det översta.
<div id="root"></div>Tips och checklista
- Håll overlay-tillståndet globalt
- Exponera små actions
- Rendera lager med en Portal
- Stäng det översta vid Escape/bakgrund
Konceptkontroll av overlay-managern
Sammanfattning
Sammanfattning: En global overlay-store (context + reducer) centraliserar modala fönster och toastmeddelanden. Komponenter skickar actions; lager renderas via en portal; Escape eller bakgrunden stänger det översta.
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 ”Global hanterare för överlagringar (Context + Reducer)” gratis?
Ja – hela texten till ”Global hanterare för överlagringar (Context + Reducer)” 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 ”Global hanterare för överlagringar (Context + Reducer)”?
Centralisera överlagringar med Context + Reducer: ett enda lager för modaler och toastmeddelanden med enkla actions som kan anropas var som helst. 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 ”Global hanterare för överlagringar (Context + Reducer)”?
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
- Portaler, fokusfälla och stängning med Escape
- Global hanterare för överlagringar (Context + Reducer)
- Meddelanden för tillgänglighet (aria-live)