Next.js 15 Fullstack (App Router + Server Actions) · Lektion

Globaler Zustand mit Zustand

Integrieren Sie Zustand, eine leichtgewichtige Bibliothek zur Zustandsverwaltung, als leistungsfähige und flexible Lösung für den globalen Zustand.

Globaler Zustand mit Zustand ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-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 Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Meet Zustand for Global State

Welcome to Zustand! It's a small, fast, and scalable state management solution for React and Next.js applications.

Unlike some other libraries, Zustand is known for its simplicity and minimal boilerplate, making it easy to learn and use.

Simple: Uses a simple API based on React hooks.
Fast: Optimized for performance, avoiding unnecessary re-renders.
Scalable: Works well for small apps and large, complex projects.

Why Global State Matters

In larger applications, you often need to share data across many components that aren't directly connected (e.g., a user's login status or shopping cart items).

Without global state, you might find yourself 'prop drilling' – passing props down through many layers of components, which can be messy and hard to maintain.

Global state libraries like Zustand solve this by providing a central place to store and manage data accessible from any component.

Install Zustand in Your Project

Getting started with Zustand is straightforward. You just need to install it using your preferred package manager.

Open your terminal in your Next.js project directory and run one of the following commands:

npm: npm install zustand
yarn: yarn add zustand
pnpm: pnpm add zustand

Once installed, you're ready to create your first store!

Build Your First Zustand Store

A Zustand store is created using the create function. This function takes a callback that defines your initial state and any functions (actions) to modify that state.

The set argument in the callback is used to update the store's state. Let's define a basic counter store:

import { create } from 'zustand';
import React from 'react';

// Define your store
const useCounterStore = create((set) => ({
  count: 0, // Initial state
}));

// A dummy component to make it runnable
function StoreDefined() {
  return <p>Zustand store created!</p>;
}

export default function App() {
  return <StoreDefined />;
}

Access Store State in React

Now that we have a store, let's learn how to read its state within a React component. Zustand provides a hook (generated from your store) that you can call directly.

You can also use a 'selector' function to pick out just the specific pieces of state you need, avoiding unnecessary re-renders.

import { create } from 'zustand';
import React from 'react';

const useCounterStore = create((set) => ({
  count: 0,
}));

// This component reads the 'count' from the store
function CountDisplay() {
  const count = useCounterStore((state) => state.count);
  return (
    <div>
      <h3>Current Count:</h3>
      <p>{count}</p>
    </div>
  );
}

export default function App() {
  return <CountDisplay />;
}

Actions to Modify Store State

Stores are not just for reading data; they also define the actions that can modify the state. These actions are functions within your create call that use the set argument.

Let's add increment and decrement actions to our counter store and use them with buttons in a component:

import { create } from 'zustand';
import React from 'react';

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

function CounterApp() {
  // Select both state and actions
  const { count, increment, decrement } = useCounterStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default function App() {
  return <CounterApp />;
}

Optimize with State Selectors

If your store holds many values, a component that only uses a small part of the state might still re-render when other, unrelated parts of the state change.

Zustand's selector pattern helps prevent this. By providing a selector function to useStore, your component will only re-render if the *selected* part of the state changes.

import { create } from 'zustand';
import React from 'react';

const useUserProfileStore = create((set) => ({
  username: "Coddy",
  email: "coddy@example.com",
  loggedIn: true,
  updateUsername: (name) => set({ username: name }),
}));

// This component only cares about the username
function UsernameDisplay() {
  // Select only 'username' for efficient rendering
  const username = useUserProfileStore((state) => state.username);
  return (
    <div>
      <p>Hello, {username}!</p>
    </div>
  );
}

export default function App() {
  return <UsernameDisplay />;
}

Handle Asynchronous Updates

Zustand actions can easily handle asynchronous operations, such as fetching data from an API. You simply perform your async logic within the action and then call set when the data is ready.

This allows you to manage loading states or update data after network requests complete. Here's an example simulating a delayed update:

import { create } from 'zustand';
import React from 'react';

const useLoadingStore = create((set) => ({
  isLoading: false,
  message: "",
  fetchData: async () => {
    set({ isLoading: true, message: "Loading..." });
    // Simulate an API call
    await new Promise((resolve) => setTimeout(resolve, 1500));
    set({ isLoading: false, message: "Data Loaded!" });
  },
}));

function DataFetcher() {
  const { isLoading, message, fetchData } = useLoadingStore();
  return (
    <div>
      <p>{message}</p>
      <button onClick={fetchData} disabled={isLoading}>
        {isLoading ? "Fetching..." : "Fetch Data"}
      </button>
    </div>
  );
}

export default function App() {
  return <DataFetcher />;
}

Structure Your Zustand Stores

For larger Next.js applications, it's good practice to organize your Zustand stores. Instead of defining all stores in one file, create a dedicated file for each store (e.g., stores/userStore.js, stores/cartStore.js).

This keeps your codebase clean, modular, and easier to navigate. You can then import and use these store hooks wherever needed.

Test Your Zustand Skills

Consider the following Zustand store definition:


import { create } from 'zustand';

const useSettingsStore = create((set) => ({
  theme: 'light',
  fontSize: 16,
  toggleTheme: () => set((state) => ({
    theme: state.theme === 'light' ? 'dark' : 'light',
  })),
  setFontSize: (size) => set({ fontSize: size }),
}));

If you call useSettingsStore((state) => state.theme) in a component, what will its initial value be?

Zustand: A Quick Review

Great job! You've successfully explored Zustand, a powerful and lightweight library for global state management in Next.js.

You learned how to:

Create a simple Zustand store.
Read state and dispatch actions in components.
Optimize performance using selectors.
Handle asynchronous updates.

Zustand's simplicity and flexibility make it an excellent choice for managing client-side global state in your applications. Keep practicing to master it!

Häufig gestellte Fragen

Ist die Lektion „Globaler Zustand mit Zustand“ kostenlos?

Ja — der vollständige Text von „Globaler Zustand mit Zustand“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Globaler Zustand mit Zustand“?

Integrieren Sie Zustand, eine leichtgewichtige Bibliothek zur Zustandsverwaltung, als leistungsfähige und flexible Lösung für den globalen Zustand. Du übst Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions) zu starten?

Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) 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 „Globaler Zustand mit Zustand“?

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 Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?

Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-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

← Zurück zu Next.js 15 Fullstack (App Router + Server Actions)