Globaler Overlay-Manager (Context + Reducer)
Zentralisieren Sie Overlays mit Context + Reducer: ein einziger Store für Modals/Toasts mit einfachen Actions, die von überall aufgerufen werden können.
Globaler Overlay-Manager (Context + Reducer) ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum ein globaler Manager?
Ziel: Steuern Sie alle Overlays zentral.
- Context stellt Aktionen bereit
- Reducer verwaltet den Status
- Modals werden gestapelt, Toasts in eine Warteschlange eingereiht
Designregeln
- Verwenden Sie einen zentralen Store für Overlays
- Stellen Sie openModal/closeTop/showToast bereit
- Rendern Sie Ebenen über ein Portal
- Behalten Sie die A11y-Grundlagen bei: role="dialog", Escape/Backdrop
Store: context + reducer
Erstellen Sie einen kleinen Store: Stacks für modals und toasts sowie einfache Actions.
<div id="root"></div>Manager aus Komponenten verwenden
Jede Komponente ruft openModal oder showToast auf – kein Prop-Drilling.
<div id="root"></div>Stacking + Escape zum Schließen des obersten Elements
Unterstützen Sie einen Stack: Öffnen Sie ein weiteres Modal innerhalb eines Modals; Escape schließt das oberste Element.
<div id="root"></div>Tipps & Checkliste
- Halten Sie den Overlay-Status global
- Stellen Sie kleine Actions bereit
- Rendern Sie Ebenen mit einem Portal
- Schließen Sie das oberste Element mit Escape/Backdrop
Wissenscheck zum Overlay-Manager
Zusammenfassung
Zusammenfassung: Ein globaler Overlay-Store (context + reducer) zentralisiert Modals und Toasts. Komponenten dispatchen Actions; Ebenen werden über ein Portal gerendert, und Escape oder der Backdrop schließen das oberste Element.
Häufig gestellte Fragen
Ist die Lektion „Globaler Overlay-Manager (Context + Reducer)“ kostenlos?
Ja — der vollständige Text von „Globaler Overlay-Manager (Context + Reducer)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Globaler Overlay-Manager (Context + Reducer)“?
Zentralisieren Sie Overlays mit Context + Reducer: ein einziger Store für Modals/Toasts mit einfachen Actions, die von überall aufgerufen werden können. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Globaler Overlay-Manager (Context + Reducer)“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Portals, Fokusfalle und Schließen mit Escape
- Globaler Overlay-Manager (Context + Reducer)
- Ankündigungen für Barrierefreiheit (aria-live)