Zustand-storen luominen
Asentakaa Zustand, määrittäkää store creatella, lisätkää tilan ominaisuudet ja toimintofunktiot sekä selvittäkää, miten store eroaa Redux-arkkitehtuurista.
Zustand-storen luominen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on Zustand?
Zustand (saksaksi tila) on minimaalinen ja nopea Reactin tilanhallintakirjasto. Toisin kuin Redux, se ei vaadi ylimääräistä koodia, kuten action creator -funktioita, reducereita tai Provider-käärettä. Määrittelette storen yhtenä funktiona, ja mikä tahansa komponentti voi tilata sen käyttöönsä yksinkertaisella hookilla. Zustand sopii erinomaisesti sovelluksiin, jotka tarvitsevat globaalin tilan ilman Redux Toolkitin monimutkaisuutta.
Zustandin asentaminen
Asentakaa Zustand npm:stä yhdellä komennolla. Sillä ei ole riippuvuuksia, ja se toimii React Nativen kanssa suoraan. Paketti on kevyt — gzipattuna alle 1 kB — joten sovelluksen bundle-koko pysyy pienenä.
npm install zustandEnsimmäisen storen luominen
Kutsukaa Zustandin create-funktiota ja välittäkää sille funktio, joka vastaanottaa set-funktion ja palauttaa objektin, joka sisältää tilan ominaisuudet ja actionit. Palautettu arvo on mukautettu hook, jonka nimenä käytetään tavallisesti muotoa useXxxStore ja jota komponentit kutsuvat storen käyttämiseksi.
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 }),
}));set-funktio
set-funktio on tapa, jolla Zustand päivittää tilaa. Voitte välittää sille joko osittaisen tilaobjektin, jonka Zustand yhdistää nykyiseen tilaan, tai callback-funktion, joka vastaanottaa nykyisen tilan ja palauttaa päivitettävän osan. Zustand ilmoittaa automaattisesti kaikille tilaajille, kun tila muuttuu.
// Partial object — Zustand merges it
set({ count: 0 });
// Callback — use when new value depends on previous value
set((state) => ({ count: state.count + 1 }));
// Replace entire state (pass true as second arg)
set(() => ({ count: 0, name: 'reset' }), true);Provideria ei tarvita
Yksi Zustandin suurimmista eduista Reduxiin verrattuna on, että komponenttipuuta ei tarvitse kääriä Provider-komponenttiin. Store sijaitsee Reactin ulkopuolella, ja komponentit tilaavat sen käyttöönsä suoraan palautetun hookin kautta. Tämä tarkoittaa, että storea voi käyttää missä tahansa — komponenteissa, callback-funktioissa tai jopa React-komponenttien ulkopuolella.
// No Provider needed — just use the hook anywhere
function CounterDisplay() {
const count = useCounterStore((state) => state.count);
return <Text>Count: {count}</Text>;
}
function CounterButtons() {
const increment = useCounterStore((state) => state.increment);
const decrement = useCounterStore((state) => state.decrement);
return (
<View>
<Button title='+' onPress={increment} />
<Button title='-' onPress={decrement} />
</View>
);
}Tietyn tilan tilaaminen
Välittäkää store-hookille selector-funktio, jotta komponentti tilaa vain osan tilasta. Komponentti renderöidään uudelleen vain, kun valittu arvo muuttuu. Ilman selectoria komponentti renderöidään uudelleen aina, kun mikä tahansa storen osa päivittyy, mikä voi heikentää suorituskykyä suurissa storeissa.
// Only re-renders when count changes
const count = useCounterStore((state) => state.count);
// Only re-renders when user.name changes
const username = useUserStore((state) => state.user.name);
// Without selector — re-renders on ANY store change (avoid this)
const everything = useCounterStore();Storen käyttäminen Reactin ulkopuolella
Zustand-storeissa on getState()-metodi, joka lukee nykyisen tilan synkronisesti ilman hookeja. Lisäksi käytettävissä ovat subscribe()-metodi Reactin ulkopuolisia tilauksia varten ja setState()-metodi imperatiivisia päivityksiä varten. Tämä on hyödyllistä apufunktioissa, API-interceptoreissa tai navigoinnin apufunktioissa, jotka suoritetaan React-komponentin elinkaaren ulkopuolella.
// Access store state anywhere — no hooks required
import { useCounterStore } from './counterStore';
// Read state outside React
const currentCount = useCounterStore.getState().count;
// Update state outside React
useCounterStore.getState().increment();
// Subscribe outside React
const unsub = useCounterStore.subscribe((state) => {
console.log('Count changed to:', state.count);
});Asynkroniset actionit Zustandissa
Zustand-toiminnot voivat olla asynkronisia — merkitkää funktio vain async-funktioksi ja kutsukaa set-funktiota await-operaation jälkeen. Erityisiä asynkronisia apuohjelmia, kuten Reduxin createAsyncThunk-toimintoa, ei tarvita. Voitte lisätä lataus- ja virhetilan suoraan storeen ja päivittää niitä asynkronisen toiminnon sisällä.
export const usePostsStore = create<PostsStore>((set) => ({
posts: [],
loading: false,
error: null,
fetchPosts: async () => {
set({ loading: true, error: null });
try {
const res = await fetch('https://api.example.com/posts');
const data = await res.json();
set({ posts: data, loading: false });
} catch (e) {
set({ error: 'Failed to load', loading: false });
}
},
}));Zustandin ja Reduxin vertailu
Redux Toolkit on rakenteellisempi ja tarjoaa suuremmille tiimeille vahvemmat käytännöt, aikamatkavirheenkorjauksen ja tuen monimutkaiselle tilalle. Zustand on parhaimmillaan, kun tarvitsette globaalin tilan mahdollisimman vähällä ylimääräisellä rakenteella — yksi tiedosto, ei action-tyyppejä eikä Provider-komponenttia. Molemmat ovat toimivia vaihtoehtoja; valitkaa Zustand pieniin tai keskikokoisiin sovelluksiin tai silloin, kun haluatte edetä nopeasti ilman Reduxin vaatimaa boilerplate-koodia.
Useiden storejen organisointi
Suuremmissa sovelluksissa jakakaa tila useisiin tarkoitukseen keskittyviin storeihin sen sijaan, että käyttäisitte yhtä valtavaa storea. Voitte esimerkiksi luoda erikseen useAuthStore-, useCartStore- ja useSettingsStore-storet. Kunkin storen tiedosto on pieni, itsenäisesti testattavissa ja tuodaan vain niihin komponentteihin, jotka tarvitsevat sitä. Näin toisiinsa liittymättömät tilamuutokset eivät aiheuta tarpeettomia uudelleenrenderöintejä.
// stores/authStore.ts
export const useAuthStore = create<AuthStore>((set) => ({ /* ... */ }));
// stores/cartStore.ts
export const useCartStore = create<CartStore>((set) => ({ /* ... */ }));
// Component imports only what it needs
import { useAuthStore } from '../stores/authStore';
import { useCartStore } from '../stores/cartStore';Immer-middleware monimutkaisiin päivityksiin
Jos tilanne on syvästi sisäkkäinen ja haluatte tehdä päivityksiä muuttamalla arvoja suoraan (kuten Redux Toolkitin Immer-integraatiossa), käärikää storen luoja Zustandin immer-middlewaresovelluksella. Immerin avulla voitte kirjoittaa state.user.preferences.theme = 'dark' sen sijaan, että levittäisitte objektin jokaisen tason manuaalisesti.
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
export const useSettingsStore = create(immer<SettingsStore>((set) => ({
user: { name: '', preferences: { theme: 'light', notifications: true } },
setTheme: (theme) => set((state) => {
state.user.preferences.theme = theme; // Immer makes this safe
}),
})));Pikatarkistus
Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Native -mobiilikehityksen käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opitte, että Zustand luo globaalit storet vähäisellä boilerplate-koodilla yhden create-kutsun avulla, Provider-komponenttia ei tarvita, koska store sijaitsee React-puun ulkopuolella, ja asynkroniset toiminnot toimivat suoraan merkitsemällä storen funktiot asynkronisiksi. Seuraavaksi tutustumme Zustand-storen tilan lukemiseen ja päivittämiseen komponenteissa.
Opi JavaScript 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
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Zustand-storen luominen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Zustand-storen luominen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Zustand-storen luominen”?
Asentakaa Zustand, määrittäkää store creatella, lisätkää tilan ominaisuudet ja toimintofunktiot sekä selvittäkää, miten store eroaa Redux-arkkitehtuurista. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Zustand-storen luominen”-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ä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native 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
- Zustand-storen luominen
- Storen tilan lukeminen ja päivittäminen komponenteissa
- Zustand-tilan säilyttäminen AsyncStoragella
- Slices-malli ja Devtools-integraatio