Next.js 15 Fullstack Web Apps · Lekcja

Stan po stronie klienta z Zustand/Jotai

Implementuj lekkie i wydajne globalne zarządzanie stanem po stronie klienta za pomocą Zustand lub Jotai.

Lekcja 2 z 411 kroki

Stan po stronie klienta z Zustand/Jotai to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Global State: Beyond Local

In React, you've learned about local state with useState, which is great for data used only within a single component.

But what if data needs to be shared across many components, or deeply nested components, without 'prop drilling' (passing props down through many layers)? This is where client-side global state management comes in.

Global state allows any component to access or update shared data directly, simplifying complex data flows and making your application more maintainable.

Meet Zustand: Simple State

Zustand is a small, fast, and scalable state management solution for React. Its API is simple and hooks-based, making it very intuitive to learn and use.

Minimalistic: Less boilerplate code.
Fast: Optimized for performance.
Flexible: Works with any React component.
Hooks-based: Feels natural to React developers.

Get Started with Zustand

Before we dive into creating stores, you'll need to install Zustand in your Next.js project. It's a simple npm or yarn command.

Open your terminal in the project root and run:

npm install zustand

Or if you prefer Yarn:

yarn add zustand

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

Crafting a Zustand Store

A Zustand store is created using the create function. This function takes a callback that defines your initial state and actions.

Think of a store as a central hub for specific pieces of global data. Let's create a basic counter store:

import { create } from 'zustand';

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

// This store can be imported and used in your React components.
// It's not runnable on its own, but defines the global state structure.

Store State & Actions

Beyond just holding state, a store also contains actions – functions that modify the state. The set function provided by Zustand allows you to update the store's state.

Here's how we add increment and decrement actions to our counter store:

import { create } from 'zustand';

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

// This store now has both state (count) and actions (increment, decrement).

Connect Components to Store

To use the global state in your React components, you simply import the store hook (e.g., useCounterStore) and call it. You can select specific pieces of state or actions.

Let's create a component that displays the current count from our store:

import { create } from 'zustand';

// Define your store (as in previous scenes)
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// A React component that uses the store
export default function CounterDisplay() {
  // Select the 'count' state from the store
  const count = useCounterStore((state) => state.count);

  return (
    <div>
      <p>Current Count: {count}</p>
    </div>
  );
}

// This component can be rendered in a Next.js page or another component.

Interactive Counter Example

Now let's make our counter interactive! We'll add buttons that call the increment and decrement actions defined in our store.

This shows how components can both read from and write to the global state, keeping everything synchronized.

import { create } from 'zustand';

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

// A React component that uses the store and its actions
export default function InteractiveCounter() {
  // Select both state and actions
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={decrement}>Decrement</button>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

// This component is fully runnable and demonstrates Zustand in action.

Efficient State Selection

By default, if any part of the store's state changes, components that use the store might re-render. To optimize this, you can use selectors.

A selector is a function you pass to useStore that picks only the specific data your component needs. If only that selected data changes, the component re-renders.

import { create } from 'zustand';

// A more complex store with multiple states
const useSettingsStore = create((set) => ({
  theme: 'dark',
  fontSize: 16,
  toggleTheme: () => set((state) => ({ theme: state.theme === 'dark' ? 'light' : 'dark' })),
  setFontSize: (size) => set({ fontSize: size }),
}));

// Component only cares about 'theme'
export default function ThemeDisplay() {
  // Using a selector to only subscribe to 'theme'
  const theme = useSettingsStore((state) => state.theme);

  return (
    <p>Current Theme: <b>{theme}</b></p>
  );
}

// If fontSize changes, ThemeDisplay will NOT re-render because it only selects 'theme'.

Zustand Best Practices

To keep your Zustand stores clean and efficient:

Immutability: Always update state immutably. Don't directly modify objects or arrays in state; create new ones.
Separate Concerns: Keep related state and actions in the same store. Create multiple stores for different domains (e.g., useUserStore, useCartStore).
Selectors: Use selectors to prevent unnecessary re-renders in components.
Middleware: For advanced features like persistence or logging, explore Zustand's middleware options.

Zustand Knowledge Check

Zustand offers a flexible and lightweight approach to global state management. Based on what you've learned, choose the correct statements about its benefits and characteristics.

Odpowiedz w interaktywnej lekcji

Zustand: A Quick Recap

Congratulations! You've learned the fundamentals of client-side global state management with Zustand.

We explored why global state is essential for complex apps.
You saw how to define a Zustand store with state and actions using create.
We learned to connect React components to the store and interact with its state and actions.
Finally, we discussed how selectors can optimize component re-renders.

Zustand empowers you to manage shared data efficiently, making your Next.js applications more scalable and easier to maintain.

Bezpłatny start

Ucz się TypeScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 12
Lekcje: 48

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Stan po stronie klienta z Zustand/Jotai” jest bezpłatna?

Tak — pełny tekst „Stan po stronie klienta z Zustand/Jotai” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Co nauczysz się w „Stan po stronie klienta z Zustand/Jotai”?

Implementuj lekkie i wydajne globalne zarządzanie stanem po stronie klienta za pomocą Zustand lub Jotai. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?

Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Stan po stronie klienta z Zustand/Jotai”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?

Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

React Query do obsługi stanu serwera
Stan po stronie klienta z Zustand/Jotai
Strategie buforowania po stronie serwera
Optymistyczne aktualizacje i unieważnianie pamięci podręcznej

← Powrót do Next.js 15 Fullstack Web Apps