Ihren ersten Zustand-Store erstellen

Willkommen

Was ist Zustand?

Installation

npm install zustand

Einen Store erstellen

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Den Store in einer Komponente verwenden

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Selektor-Syntax

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Zustand mit set aktualisieren

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Asynchrone Actions

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Verschachtelten Zustand aktualisieren

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Store außerhalb von React auslesen

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Kurzer Check

Zusammenfassung

Als Nächstes