Zustand kevyeen React-tilanhallintaan
Luo Zustand-store create()-funktiolla, lue tilaa hookilla, päivitä sitä toiminnoilla ja hyödynnä minimaalista APIa ilman boilerplate-koodia
Zustand kevyeen React-tilanhallintaan on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mikä Zustand on?
Zustand on minimaalinen ja nopea Reactin tilanhallintakirjasto. Sen koko rajapinta on pieni: luokaa store ja lukekaa sekä päivittäkää sitä hookin avulla. Reducereita, actioneita tai toisteista peruskoodia ei tarvita.
Storen luominen
create() määrittää storen, joka sisältää tilan ja actionit tavallisena oliona. Palautettu arvo on 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 }),
}));Storen tilan lukeminen
Kutsukaa hookia valitsinfunktion kanssa tilan tiettyjen osien tilaamiseksi. Komponentti renderöidään uudelleen vain, kun valittu osa muuttuu.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Actionien lukeminen
Valitkaa actionit samalla tavalla. Actionit eivät muutu, joten niiden valitseminen ei aiheuta ylimääräisiä uudelleenrenderöintejä.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Tilan päivittäminen set()-funktiolla
set()-funktio yhdistää päivitykset matalasti, kuten React-luokkakomponenttien setState. Välittäkää funktio, jos päivitys riippuu edellisestä tilasta.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Asynkroniset actionit
Zustandin actionit voivat olla asynkronisia — kutsukaa vain set()-funktiota asynkronisen toiminnon odottamisen jälkeen.
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 });
}
}));Slicet — suurten storejen koostaminen
Jakakaa suuri store sliceihin eli erillisiin olioihin ja yhdistäkää ne. Zustandin malli ei edellytä slice-abstraktiota, mutta se on selkeä tapa organisoida suuria storeja.
Middleware: persist
persist-middleware tallentaa Zustandin tilan localStorageen ja palauttaa sen käyttöön latauksen yhteydessä — vähäisellä määrityksellä.
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
Lisätkää Redux DevTools -tuki Zustainiin devtools-middlewaren avulla. Saatte kattavan action-lokauksen ja aikamatkustuksen.
Zustand ja Redux Toolkit
Zustand on minimaalinen, siinä ei ole toisteista peruskoodia, se on nopea ottaa käyttöön ja sopii hyvin pieniin ja keskikokoisiin sovelluksiin. RTK on jäsennelty ja skaalautuva, tarjoaa luokkansa parhaat DevTools-työkalut ja sopii paremmin suurille tiimeille. Molemmat ovat hyviä valintoja — useimmissa sovelluksissa Zustainin yksinkertaisuus ratkaisee.
Valitsimet ja suorituskyky
Valitkaa aina pienin tilan osa, jota komponentti tarvitsee. Koko tilaolion valitseminen aiheuttaa uudelleenrenderöinnin jokaisen storen muutoksen yhteydessä. Käyttäkää zustand/shallow-kirjaston shallow-funktiota usean ominaisuuden valitsemiseen.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Pikatesti
Miten luotte Zustand-storen, jota koko React-sovellus voi käyttää?
Kertaus: Zustand
create() määrittää tilan ja actionit. Palautettu arvo on hook. Valitkaa tilan osia tarpeettomien uudelleenrenderöintien välttämiseksi. set() yhdistää tilapäivitykset. Asynkroniset actionit kutsuvat set()-funktiota await-toiminnon jälkeen. persist-middleware on tarkoitettu localStorageen tallentamiseen. devtools yhdistää Redux DevToolsiin. Provideria ei tarvita.
Opi HTML 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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Zustand kevyeen React-tilanhallintaan” ilmainen?
Kyllä – oppitunnin ”Zustand kevyeen React-tilanhallintaan” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Zustand kevyeen React-tilanhallintaan”?
Luo Zustand-store create()-funktiolla, lue tilaa hookilla, päivitä sitä toiminnoilla ja hyödynnä minimaalista APIa ilman boilerplate-koodia Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Zustand kevyeen React-tilanhallintaan”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-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
- Redux Toolkit: createSlice ja configureStore
- Zustand kevyeen React-tilanhallintaan
- Pinia Vuelle: defineStore ja storeToRefs
- Milloin käyttää globaalia ja milloin paikallista tilaa