Zustand für schlanken React-State
Erstellen Sie mit create() einen Zustand-Store, lesen Sie den State mit dem Hook, aktualisieren Sie ihn mit Actions und profitieren Sie von einer minimalen API ohne Boilerplate.
Zustand für schlanken React-State ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Zustand?
Zustand ist eine minimale, schnelle State-Management-Bibliothek für React. Die gesamte API ist sehr klein: Erstellen Sie einen Store und verwenden Sie einen Hook, um ihn zu lesen und zu aktualisieren. Keine Reducer, keine Actions, kein Boilerplate-Code.
Einen Store erstellen
create() definiert den Store mit State und Actions als einfaches Objekt. Der zurückgegebene Wert ist ein Hook.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));State aus dem Store lesen
Rufen Sie den Hook mit einer Selector-Funktion auf, um einen bestimmten State-Ausschnitt zu abonnieren. Die Komponente wird nur dann erneut gerendert, wenn sich der ausgewählte Ausschnitt ändert.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Actions lesen
Wählen Sie Actions auf dieselbe Weise aus. Actions ändern sich nicht, daher führt ihre Auswahl nicht zu zusätzlichen erneuten Renderings.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}State mit set() aktualisieren
Die Funktion set() führt Aktualisierungen flach zusammen (ähnlich wie setState in React-Klassenkomponenten). Übergeben Sie eine Funktion für Aktualisierungen, die vom vorherigen State abhängen.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Asynchrone Actions
Actions in Zustand können asynchron sein — rufen Sie set() einfach nach dem Awaiten des asynchronen Vorgangs auf.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Slices — Große Stores zusammensetzen
Teilen Sie einen großen Store in Slices (separate Objekte) auf und kombinieren Sie sie. Das Muster von Zustand erfordert zwar keine Slice-Abstraktion, aber sie ist eine übersichtliche Möglichkeit, große Stores zu organisieren.
Middleware: persist
Die persist-Middleware speichert den Zustand von Zustand in localStorage und stellt ihn beim Laden wieder her — mit minimalem Einrichtungsaufwand.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Middleware: devtools
Fügen Sie Zustand mit der devtools-Middleware Unterstützung für Redux DevTools hinzu. Sie erhalten vollständige Action-Protokollierung und Zeitreisen.
Zustand vs Redux Toolkit
Zustand: minimal, kein Boilerplate-Code, schnell einzurichten, hervorragend für kleine bis mittelgroße Apps. RTK: strukturiert, skalierbar, erstklassige DevTools, besser für große Teams. Beide sind gute Optionen — für die meisten Apps überzeugt Zustand durch seine Einfachheit.
Selectoren und Performance
Wählen Sie immer den kleinsten State-Ausschnitt aus, den Ihre Komponente benötigt. Die Auswahl des gesamten State-Objekts führt bei jeder Store-Änderung zu erneuten Renderings. Verwenden Sie shallow aus zustand/shallow für die Auswahl mehrerer Eigenschaften.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Schnelltest
Wie erstellen Sie einen Zustand-Store, den eine gesamte React-App verwenden kann?
Zusammenfassung: Zustand
create() definiert State und Actions. Der zurückgegebene Wert ist ein Hook. Wählen Sie Ausschnitte aus, um unnötige erneute Renderings zu vermeiden. set() führt State-Aktualisierungen zusammen. Asynchrone Actions rufen set() nach await auf. Die persist-Middleware ist für localStorage gedacht. devtools integriert Redux DevTools. Ein Provider ist nicht erforderlich.
Häufig gestellte Fragen
Ist die Lektion „Zustand für schlanken React-State“ kostenlos?
Ja — der vollständige Text von „Zustand für schlanken React-State“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Zustand für schlanken React-State“?
Erstellen Sie mit create() einen Zustand-Store, lesen Sie den State mit dem Hook, aktualisieren Sie ihn mit Actions und profitieren Sie von einer minimalen API ohne Boilerplate. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 4.
Wie lange dauert die Lektion „Zustand für schlanken React-State“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Redux Toolkit: createSlice und configureStore
- Zustand für schlanken React-State
- Pinia für Vue: defineStore und storeToRefs
- Wann globalen und lokalen State verwenden