Next.js 15 -fullstack-kehitys (App Router + Server Actions) · Oppitunti

Globaali tila Zustandilla

Integroi Zustand, kevyt tilanhallintakirjasto, tehokkaaksi ja joustavaksi globaalin tilan ratkaisuksi

Oppitunti 2/411 vaihetta

Globaali tila Zustandilla on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Tutustu Zustandiin globaalin tilan hallinnassa

Tervetuloa Zustandin pariin! Se on pieni, nopea ja skaalautuva tilanhallintaratkaisu React- ja Next.js-sovelluksille.

Toisin kuin jotkin muut kirjastot, Zustand tunnetaan yksinkertaisuudestaan ja vähäisestä boilerplatestaan, joten se on helppo oppia ja ottaa käyttöön.

Yksinkertainen: Käyttää React-hookeihin perustuvaa yksinkertaista APIa.
Nopea: Optimoitu suorituskykyä varten ja välttää tarpeettomat uudelleenrenderöinnit.
Skaalautuva: Toimii hyvin sekä pienissä sovelluksissa että suurissa ja monimutkaisissa projekteissa.

Miksi globaali tila on tärkeä

Suuremmissa sovelluksissa tietoja on usein jaettava monien komponenttien välillä, vaikka komponentit eivät olisi suoraan yhteydessä toisiinsa (esimerkiksi käyttäjän kirjautumistila tai ostoskorin tuotteet).

Ilman globaalia tilaa saatatte joutua käyttämään prop drilling -tekniikkaa eli välittämään propseja monen komponenttikerroksen läpi, mikä voi tehdä koodista sekavaa ja vaikeasti ylläpidettävää.

Zustandin kaltaiset globaalin tilan kirjastot ratkaisevat tämän tarjoamalla keskitetyn paikan tietojen tallentamiseen ja hallintaan niin, että mikä tahansa komponentti voi käyttää niitä.

Asenna Zustand projektiisi

Zustandin käyttöönotto on suoraviivaista. Teidän tarvitsee vain asentaa se haluamallanne paketinhallintaohjelmalla.

Avatkaa päätelaite Next.js-projektinne hakemistossa ja suorittakaa jokin seuraavista komennoista:

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

Kun asennus on valmis, voitte luoda ensimmäisen store-nne!

Rakenna ensimmäinen Zustand-storesi

Zustand-store luodaan käyttämällä create-funktiota. Tämä funktio saa callback-funktion, joka määrittää alkutilan ja kaikki kyseistä tilaa muokkaavat funktiot eli actionit.

Callback-funktion set-argumenttia käytetään storen tilan päivittämiseen. Määritetään yksinkertainen laskuristore:

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 />;
}

Käytä storen tilaa Reactissa

Nyt kun meillä on store, opetellaan lukemaan sen tilaa React-komponentissa. Zustand tarjoaa hookin (joka luodaan storestanne), jota voitte kutsua suoraan.

Voitte myös käyttää selector-funktiota valitsemaan vain tarvitsemanne tilan osat ja välttämään tarpeettomat uudelleenrenderöinnit.

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 />;
}

Toiminnot storen tilan muokkaamiseen

Storeja ei käytetä vain tietojen lukemiseen, vaan niissä määritetään myös tilaa muokkaavat actionit. Nämä actionit ovat create-kutsun sisällä olevia funktioita, jotka käyttävät set-argumenttia.

Lisätään laskuristoreemme increment- ja decrement-actionit ja käytetään niitä komponentin painikkeilla:

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 />;
}

Optimoi tilan selectoreilla

Jos storessa on paljon arvoja, vain pientä osaa tilasta käyttävä komponentti saattaa silti renderöityä uudelleen, kun muut tilan toisistaan riippumattomat osat muuttuvat.

Zustandin selector-malli auttaa estämään tämän. Kun välitätte selector-funktion useStore-hookille, komponentti renderöidään uudelleen vain, jos tilan *valittu* osa muuttuu.

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 />;
}

Asynkronisten päivitysten käsittely

Zustand-actionit voivat käsitellä helposti asynkronisia toimintoja, kuten tietojen hakemista APIsta. Suoritatte vain asynkronisen logiikan actionin sisällä ja kutsutte sen jälkeen set-funktiota, kun tiedot ovat valmiit.

Näin voitte hallita lataustiloja tai päivittää tietoja verkkopyyntöjen valmistuttua. Tässä on esimerkki viivästetystä päivityksestä:

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 />;
}

Jäsentele Zustand-storesi

Suuremmissa Next.js-sovelluksissa Zustand-storejen järjestäminen on hyvä käytäntö. Sen sijaan että määrittelisitte kaikki storet yhteen tiedostoon, luokaa jokaiselle storelle oma tiedosto (esimerkiksi stores/userStore.js ja stores/cartStore.js).

Näin koodikanta pysyy siistinä ja modulaarisena ja siinä on helpompi navigoida. Voitte sitten importata ja käyttää näitä store-hookeja missä tahansa niitä tarvitaan.

Testaa Zustand-taitosi

Tarkastellaan seuraavaa Zustand-storen määritelmää:


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 }),
}));

Jos kutsutte komponentissa useSettingsStore((state) => state.theme), mikä sen alkuarvo on?

Vastaa interaktiivisessa oppitunnissa

Zustand: nopea kertaus

Hienoa työtä! Olette tutustuneet onnistuneesti Zustandiin, tehokkaaseen ja kevyeen Next.js-sovellusten globaalin tilan hallinnan kirjastoon.

Opitte seuraavat asiat:

Yksinkertaisen Zustand-storen luominen.
Tilan lukeminen ja actionien lähettäminen komponenteissa.
Suorituskyvyn optimointi selectoreilla.
Asynkronisten päivitysten käsittely.

Zustandin yksinkertaisuus ja joustavuus tekevät siitä erinomaisen vaihtoehdon sovellusten asiakaspuolen globaalin tilan hallintaan. Jatkakaa harjoittelua, niin hallitsette sen käytön!

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Globaali tila Zustandilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolun 3 oppituntia, myös oppitunnin “Globaali tila Zustandilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Globaali tila Zustandilla”?

Integroi Zustand, kevyt tilanhallintakirjasto, tehokkaaksi ja joustavaksi globaalin tilan ratkaisuksi Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Globaali tila Zustandilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?

Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Next.js 15 -fullstack-kehitys (App Router + Server Actions)