Slices-mønsteret og DevTools-integration
Organisér en stor store i logiske slices ved hjælp af slices-mønsteret, og tilføj Zustand DevTools-middleware til time-travel-debugging under udvikling.
Slices-mønsteret og DevTools-integration er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvorfor organisere stores med slices?
Efterhånden som et Zustand-store vokser, bliver det svært at vedligeholde al tilstand og alle handlinger i ét objekt. Slices-mønstret opdeler storet i flere fokuserede sektioner, som hver defineres som en separat funktion. Alle slices kombineres til ét store, så komponenter stadig får adgang til alt gennem ét hook. Det minder om slice-konceptet i Redux Toolkit, men i Zustands minimalistiske stil.
Definition af en slice-funktion
Et Zustand-slice er en funktion, der modtager set, get og eventuelt hele store-initialiseringen og returnerer et objekt, der indeholder tilstand og handlinger for det pågældende domæne. Definér hvert slice i sin egen fil, og importér dem i det samlede store. Slice-funktionens signatur svarer nøjagtigt til signaturen for den primære store-opretter.
// 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 }),
});Sammenføjning af slices til ét store
Importér alle dine slice-opretterfunktioner, og flet dem sammen i ét create-kald ved hjælp af spread-operatoren. Typen for det samlede store er skæringen af alle slice-interfacer. Komponenter kan derefter få adgang til tilstanden og handlingerne i alle slices gennem den samme useAppStore-hook.
// 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),
}));Kommunikation mellem slices
Slices kan kalde hinandens handlinger eller læse hinandens tilstand ved hjælp af get-funktionen. På den måde kan ét slice reagere på ændringer i et andet slice uden tæt kobling. Et cart-slice kan for eksempel læse auth-tokenet fra user-slicet og inkludere det i en API-anmodning ved betaling.
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: [] });
},
});Hvad er Zustand DevTools-middleware?
devtools-middleware forbinder dit Zustand-store med browserudvidelsen Redux DevTools. Når forbindelsen er oprettet, kan du inspicere hvert øjebliksbillede af tilstanden, se navnet på den handling, der udløste hver ændring, og gå tilbage til enhver tidligere tilstand. Det er uvurderligt ved fejlfinding af komplekse tilstandsforløb under udviklingen.
Tilføjelse af DevTools-middleware
Pak din store-opretter ind i devtools-middleware, som importeres fra zustand/middleware. Du kan give et valgfrit konfigurationsobjekt med en name-egenskab for at navngive storet i DevTools-panelet. Aktivér kun DevTools under udvikling for at undgå ekstra ydeevneomkostninger i produktionsbuilds.
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' }
)
);Navngivning af handlinger i DevTools
Som standard navngiver DevTools hver tilstandsændring anonymous. Giv set en beskrivende streng som det tredje argument for at give hver handling et meningsfuldt navn på DevTools-tidslinjen. Det gør det meget lettere at spore, hvilken brugerinteraktion der udløste den enkelte tilstandsændring.
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'),Kombination af DevTools med persist
Når du bruger både persist og devtools, skal du pakke storet ind i begge middlewares. Rækkefølgen er vigtig: devtools skal være den yderste wrapper, så den kan observere alle tilstandsændringer, også dem fra gendannelsen af tilstanden. Placér persist inden i devtools for at se handlinger ved gendannelse på DevTools-tidslinjen.
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' }
)
);Slices med persist og DevTools
I store apps kan du kombinere alle tre mønstre: slices til organisering, persist til lagring og devtools til fejlfinding. Pak det sammenflettede slice-objekt ind i persist og devtools. Definér den samlede type som skæringen af alle slice-interfacer, så TypeScript skriver typerne for hele storet korrekt.
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' }
)
);Navngivningskonventioner for slices
Brug ensartet navngivning for at gøre store i stor skala nemme at navigere i. Navngiv slice-filer efter domænet, f.eks. authSlice.ts og cartSlice.ts, sæt domænet foran handlingsnavne i DevTools-navne, f.eks. auth/login og cart/addItem, og hold hvert slice under 100 linjer. Opdel det yderligere, hvis et slice begynder at håndtere uvedkommende ansvarsområder.
Hvornår bør du ikke bruge slices?
Slices-mønstret tilføjer kompleksitet. Hvis dit store har færre end fem tilstandsfelter og to eller tre handlinger, bør du beholde det som ét create-kald — den ekstra kompleksitet ved opdelingen kan ikke betale sig. Brug slices til stores, der er vokset til et punkt, hvor en enkelt fil er vanskelig at forstå, eller når flere udviklere arbejder på forskellige funktioner, der deler det samme store.
Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du, at slices-mønstret opdeler et stort Zustand-store i fokuserede domænefunktioner, som samles i ét create-kald, at devtools-middleware forbinder storet med Redux DevTools, så du kan inspicere tilstanden og gå tilbage i tiden, og at navngivning af set-kald med strenge med handlingsnavne gør DevTools-tidslinjen meningsfuld. Som det næste undersøger vi direkte læsning og skrivning med AsyncStorage.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Slices-mønsteret og DevTools-integration” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Slices-mønsteret og DevTools-integration”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Slices-mønsteret og DevTools-integration”?
Organisér en stor store i logiske slices ved hjælp af slices-mønsteret, og tilføj Zustand DevTools-middleware til time-travel-debugging under udvikling. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Slices-mønsteret og DevTools-integration”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Oprettelse af en Zustand-store
- Læsning og opdatering af store-state i komponenter
- Persistens af Zustand-state med AsyncStorage
- Slices-mønsteret og DevTools-integration