Slices-malli ja Devtools-integraatio
Järjestäkää suuri store loogisiksi sliceiksi slices-mallia käyttäen ja lisätkää Zustand DevTools -middleware kehitysaikaista aikamatkavirheenkorjausta varten.
Slices-malli ja Devtools-integraatio on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.
Miksi storet kannattaa järjestää sliceihin?
Kun Zustand-store kasvaa, kaiken tilan ja kaikkien toimintojen pitäminen yhdessä oliossa muuttuu vaikeasti ylläpidettäväksi. slices-malli jakaa storen useisiin tarkoitukseen keskittyviin osiin, joista kukin määritellään erillisenä funktiona. Kaikki slicet yhdistetään yhdeksi storeksi, joten komponentit käyttävät edelleen kaikkea yhden hookin kautta. Tämä muistuttaa Redux Toolkitin slice-käsitettä, mutta Zustandin pelkistetyn tyylin mukaisesti.
Slice-funktion määrittäminen
Zustand-slice on funktio, joka vastaanottaa set- ja get-funktiot sekä valinnaisesti koko store-initialisoijan ja palauttaa kyseisen osa-alueen tilan ja toiminnot sisältävän olion. Määrittele kukin slice omaan tiedostoonsa ja tuo ne yhdistettyyn storeen. Slice-funktion allekirjoitus vastaa täsmälleen pääasiallisen storen luojan allekirjoitusta.
// slices/counterSlice.ts
import type { StateCreator } from 'zustand';
import type { AppStore } from '../useAppStore';
export interface CounterSlice {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const createCounterSlice: StateCreator<AppStore, [], [], CounterSlice> =
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
});Slicien yhdistäminen yhdeksi storeksi
Tuo kaikki slice-luojafunktiot ja yhdistä ne yhden create-kutsun sisällä spread-operaattorilla. Yhdistetyn storen tyyppi on kaikkien slice-rajapintojen leikkaus. Komponentit voivat tämän jälkeen käyttää minkä tahansa slicen tilaa ja toimintoja saman useAppStore-hookin kautta.
// useAppStore.ts
import { create } from 'zustand';
import { createCounterSlice, CounterSlice } from './slices/counterSlice';
import { createUserSlice, UserSlice } from './slices/userSlice';
export type AppStore = CounterSlice & UserSlice;
export const useAppStore = create<AppStore>((set, get, api) => ({
...createCounterSlice(set, get, api),
...createUserSlice(set, get, api),
}));Slicien välinen viestintä
Slicet voivat kutsua toistensa toimintoja tai lukea toistensa tilaa get-funktion avulla. Näin yksi slice voi reagoida toisen slicen muutoksiin ilman tiukkaa kytkentää. Esimerkiksi cart-slice voi lukea user-slicen auth-tokenin ja sisällyttää sen API-pyyntöön kassalla.
export const createCartSlice: StateCreator<AppStore, [], [], CartSlice> =
(set, get) => ({
items: [],
checkout: async () => {
const token = get().user.token; // read from userSlice
await api.checkout(get().items, token);
set({ items: [] });
},
});Mikä on Zustandin DevTools-middleware?
devtools-middleware yhdistää Zustand-storesi Redux DevTools -selainlaajennukseen. Yhdistämisen jälkeen voit tarkastella jokaista tilannevedosta, nähdä kunkin muutoksen käynnistäneen toiminnon nimen ja siirtyä aikamatkalla takaisin mihin tahansa aiempaan tilaan. Se on erittäin hyödyllinen monimutkaisten tilamuutossarjojen virheenkorjauksessa kehityksen aikana.
DevTools-middleware-ohjelmiston lisääminen
Ympäröi storen luoja zustand/middleware-moduulista tuodulla devtools-middlewarella. Välitä valinnainen määritysobjekti, jossa on name-ominaisuus, nimetäksesi storen DevTools-paneelissa. Ota DevTools käyttöön vain kehityksessä, jotta tuotantokoontiversioiden suorituskyky ei kärsi ylimääräisestä kuormasta.
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
export const useCounterStore = create(
devtools(
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
reset: () => set({ count: 0 }),
}),
{ name: 'CounterStore' }
)
);Toimintojen nimeäminen DevToolsissa
Oletusarvoisesti DevTools nimeää jokaisen tilamuutoksen nimellä anonymous. Välitä kuvaava merkkijono set-funktion kolmantena argumenttina, jotta jokainen toiminto saa merkityksellisen nimen DevToolsin aikajanalla. Näin on paljon helpompi jäljittää, mikä käyttäjän toiminto käynnisti kunkin tilamuutoksen.
increment: () =>
set(
(state) => ({ count: state.count + 1 }),
false, // false = merge (not replace)
'counter/increment' // action label in DevTools
),
reset: () =>
set({ count: 0 }, false, 'counter/reset'),DevToolsin yhdistäminen persist-middlewareen
Kun käytät sekä persist- että devtools-middlewarea, ympäröi store molemmilla middlewareilla. Järjestyksellä on merkitystä: devtools-middleware tulee sijoittaa uloimmaksi, jotta se voi tarkkailla kaikkia tilamuutoksia, myös uudelleenlatauksesta johtuvia muutoksia. Sijoita persist devtoolsin sisään, jotta näet uudelleenlataustoiminnot DevToolsin aikajanalla.
import { create } from 'zustand';
import { persist, devtools, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
export const useSettingsStore = create(
devtools(
persist(
(set) => ({ theme: 'light', setTheme: (t) => set({ theme: t }) }),
{ name: 'settings', storage: createJSONStorage(() => AsyncStorage) }
),
{ name: 'SettingsStore' }
)
);Slicet persistin ja DevToolsin kanssa
Suurissa sovelluksissa yhdistä kaikki kolme toimintamallia: slicet jäsentämiseen, persist tallennukseen ja devtools virheenkorjaukseen. Ympäröi yhdistetty slice-olio persistillä ja devtoolsilla. Määrittele yhdistetty tyyppi kaikkien slice-rajapintojen leikkauksena, jotta TypeScript tyypittää koko storen oikein.
export const useAppStore = create<AppStore>()(
devtools(
persist(
(set, get, api) => ({
...createCounterSlice(set, get, api),
...createUserSlice(set, get, api),
}),
{ name: 'app-store', storage: createJSONStorage(() => AsyncStorage) }
),
{ name: 'AppStore' }
)
);Slicien nimeämiskäytännöt
Käytä johdonmukaista nimeämistä, jotta suurissa storeissa on helppo navigoida. Nimeä slice-tiedostot toimialueen mukaan (esimerkiksi authSlice.ts ja cartSlice.ts), lisää DevTools-nimissä toimintojen eteen toimialueen nimi (esimerkiksi auth/login ja cart/addItem) ja pidä kukin slice alle 100 rivin pituisena. Jaa slice edelleen, jos se alkaa käsitellä toisiinsa liittymättömiä asioita.
Milloin sliceja ei kannata käyttää
Slices-malli lisää monimutkaisuutta. Jos storessasi on alle viisi tilakenttää ja kaksi tai kolme toimintoa, pidä se yhtenä create-kutsuna — jakamisesta aiheutuva lisätyö ei ole sen arvoista. Käytä sliceja storeissa, jotka ovat kasvaneet niin suuriksi, että yhtä tiedostoa on vaikea ymmärtää, tai kun useat kehittäjät työskentelevät eri ominaisuuksien parissa, jotka käyttävät samaa storea.
Pikatarkistus
Testaa ymmärryksesi tämän oppitunnin React Native -mobiilikehityksen käsitteistä.
Oppitunnin yhteenveto
Tällä oppitunnilla opit, että slices-malli jakaa suuren Zustand-storen toimialueisiin keskittyviin funktioihin, jotka yhdistetään yhdessä create-kutsussa, devtools-middleware yhdistää storen Redux DevToolsiin tilan tarkastelua ja aikamatkailua varten ja set-kutsujen nimeäminen toimintojen nimimerkkijonoilla tekee DevToolsin aikajanasta informatiivisen. Seuraavaksi tutustumme lukemiseen ja kirjoittamiseen suoraan AsyncStoragen avulla.
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 ”Slices-malli ja Devtools-integraatio” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Slices-malli ja Devtools-integraatio”. 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 ”Slices-malli ja Devtools-integraatio”?
Järjestäkää suuri store loogisiksi sliceiksi slices-mallia käyttäen ja lisätkää Zustand DevTools -middleware kehitysaikaista aikamatkavirheenkorjausta varten. 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 4/4.
Kuinka kauan ”Slices-malli ja Devtools-integraatio”-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