Context + Reducer: Einfache State-Container

Ziel: Bündeln Sie die State-Logik in einem Provider (Context) und einem Reducer. Untergeordnete Komponenten lesen die Werte über einen kleinen Custom Hook aus: kein Prop Drilling und vorhersehbare Updates.

Muster:

• Context erstellen
• Innerhalb des Providers: useReducer(state, action)
• {state, dispatch} bereitstellen
• Einen Hook nach dem Muster von useCounter() erstellen, der useContext aufruft

Ein minimaler CounterProvider stellt state und dispatch bereit. Untergeordnete Komponenten verwenden useCounter(), um Werte auszulesen und zu aktualisieren.

Hinweise:

• Halten Sie Actions klein (INC, DEC, RESET).
• Platzieren Sie den Reducer gemeinsam mit dem Provider.
• Exportieren Sie nur den Custom Hook, damit die Verwendung einfach bleibt.

Ein kleiner TodoProvider zeigt, wie sich mehrere Felder mit einem Reducer und einer klaren Hook-API vorhersehbar aktualisieren lassen.

Stolperfallen:

• Zu vergessen, die untergeordneten Komponenten mit dem Provider zu umschließen
• Sehr große Objekte in den Context zu legen – geben Sie nur weiter, was benötigt wird
• State im Reducer zu verändern – geben Sie immer neue Objekte zurück

Zusammenfassung: Context ermöglicht den Zugriff, useReducer verwaltet Übergänge. Exportieren Sie einen kleinen useXxx-Hook, um {state, dispatch} auszulesen, und halten Sie die Verwendung einfach.