Lese og oppdatere store-tilstand i komponenter
Få tilgang til store-verdier og handlinger i en React Native-komponent med useStore-hooken, og utløs oppdateringer fra knappetrykk eller skjemainnsendinger.
Lese og oppdatere store-tilstand i komponenter er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Koble en komponent til Zustand
Det er enkelt å bruke en Zustand-store i en komponent: kall store-hooken øverst i funksjonen. Hooken er det samme objektet som returneres av create. Du kan sende inn en selektor for å velge bestemte verdier, eller lese handlinger direkte. Du trenger ikke importere useSelector eller useDispatch – store-hooken håndterer alt.
import { useCounterStore } from '../stores/counterStore';
export default function CounterScreen() {
const count = useCounterStore((state) => state.count);
const increment = useCounterStore((state) => state.increment);
const decrement = useCounterStore((state) => state.decrement);
return (
<View style={styles.container}>
<Text style={styles.count}>{count}</Text>
<Button title='Increment' onPress={increment} />
<Button title='Decrement' onPress={decrement} />
</View>
);
}Effektiv uthenting av flere verdier
Hvis du vil lese flere verdier fra en Zustand-store uten å utløse for mange nye gjengivelser, har du to alternativer. Du kan kalle store-hooken flere ganger med individuelle selektorer, der hvert abonnement er uavhengig, eller du kan returnere et objekt og bruke shallow-hjelpefunksjonen for likhetssammenligning av hver egenskap separat.
import { shallow } from 'zustand/shallow';
// Option 1: multiple hooks (preferred for 2-3 values)
const count = useCounterStore((s) => s.count);
const status = useCounterStore((s) => s.status);
// Option 2: shallow equality for multiple values at once
const { count, status } = useCounterStore(
(s) => ({ count: s.count, status: s.status }),
shallow
);Utløse oppdateringer fra knappetrykk
Zustand-handlinger er vanlige JavaScript-funksjoner, så du kan sende dem direkte til hendelsesbehandlere i React Native, for eksempel onPress. Du trenger ikke sende et action-objekt eller kalle en hjelpefunksjon – bare kall funksjonen. Dette gjør komponentkoden ryddigere og enklere å lese enn Redux-mønsteret med dispatch.
export default function TodoInput() {
const [text, setText] = React.useState('');
const addTodo = useTodoStore((state) => state.addTodo);
const handleAdd = () => {
if (text.trim()) {
addTodo(text.trim());
setText('');
}
};
return (
<View>
<TextInput value={text} onChangeText={setText} placeholder='New todo' />
<Button title='Add' onPress={handleAdd} />
</View>
);
}Lese store-tilstand i en FlatList
Zustand-store-er fungerer naturlig sammen med React Native sin FlatList. Velg arrayet fra store-en og send det til data-propen. Zustand gjengir bare denne komponenten på nytt når array-referansen endres. Det skjer når en store-handling erstatter eller endrer items-arrayet og returnerer en ny referanse via set.
export default function TodoList() {
const todos = useTodoStore((state) => state.todos);
const removeTodo = useTodoStore((state) => state.removeTodo);
return (
<FlatList
data={todos}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => removeTodo(item.id)}>
<Text>{item.text}</Text>
</TouchableOpacity>
)}
/>
);
}Oppdatere nestet tilstand
Når store-tilstanden din inneholder nestede objekter, sender du en funksjon til set og sprer nivået du vil oppdatere. Uten spredning ville set erstattet toppnøkkelen fullstendig og fjernet andre nestede egenskaper. Alternativt kan du bruke Immer-mellomvaren, som ble gjennomgått i forrige leksjon, til å endre nestede verdier direkte.
export const useProfileStore = create<ProfileStore>((set) => ({
profile: {
name: '',
bio: '',
avatar: null,
},
updateName: (name: string) =>
set((state) => ({ profile: { ...state.profile, name } })),
updateBio: (bio: string) =>
set((state) => ({ profile: { ...state.profile, bio } })),
}));Optimistiske UI-oppdateringer
Optimistiske oppdateringer forbedrer den opplevde ytelsen ved å oppdatere brukergrensesnittet umiddelbart når brukeren utfører en handling, før du venter på svaret fra serveren. I Zustand kaller du set for å oppdatere tilstanden med en gang, og utfører deretter API-kallet. Hvis API-kallet mislykkes, kaller du set på nytt for å tilbakestille tilstanden til den forrige verdien.
toggleLike: async (postId: string) => {
// Update UI immediately
set((state) => ({
posts: state.posts.map((p) =>
p.id === postId ? { ...p, liked: !p.liked } : p
),
}));
try {
await api.toggleLike(postId);
} catch {
// Revert on failure
set((state) => ({
posts: state.posts.map((p) =>
p.id === postId ? { ...p, liked: !p.liked } : p
),
}));
}
}Tilbakestille store-tilstand
Et vanlig mønster er å legge til en reset-handling som gjenoppretter store-en til den opprinnelige tilstanden. Lagre den opprinnelige tilstanden i en konstant utenfor create-kallet, og bruk den i reset-handlingen. Dette er nyttig ved utlogging, når du må slette alle brukerdata fra alle store-er samtidig.
const initialState = { user: null, token: null, isLoggedIn: false };
export const useAuthStore = create<AuthStore>((set) => ({
...initialState,
login: (user, token) => set({ user, token, isLoggedIn: true }),
logout: () => set(initialState), // restore all fields to initial values
}));Følge endringer i en store med subscribe
useStore.subscribe lar deg reagere på endringer i en store utenfor React-komponenter – for eksempel ved å skrive til AsyncStorage når innstillinger endres, eller logge analysehendelser når bestemte tilstandsoverganger oppstår. Avslutt alltid abonnementet i cleanup-funksjonen for å unngå minnelekkasjer.
useEffect(() => {
const unsubscribe = useSettingsStore.subscribe(
(state) => state.theme,
(theme) => {
console.log('Theme changed to:', theme);
AsyncStorage.setItem('theme', theme);
}
);
return unsubscribe; // cleanup on unmount
}, []);Dele tilstand mellom skjermer
Fordi Zustand-store-er ligger utenfor alle komponenttrær, egner de seg perfekt til å dele tilstand mellom skjermer uten prop-drilling eller parametere i React Navigation. Skjerm A oppdaterer store-en, og skjerm B leser fra den – begge ser den samme aktive tilstanden umiddelbart. Dette er mye enklere enn å sende data gjennom ruteparametere i dype navigasjonshierarkier.
// ScreenA.tsx — writes to store
const setSelectedProduct = useProductStore((s) => s.setSelected);
<Button title='View Details' onPress={() => {
setSelectedProduct(product);
navigation.navigate('ProductDetail');
}} />
// ScreenB.tsx — reads from store
const product = useProductStore((s) => s.selected);Teste Zustand-store-handlinger
Det er enkelt å teste en Zustand-store fordi den ikke er avhengig av React. Importer store-en, kall handlinger direkte på getState(), og kontroller de oppdaterte verdiene. Du kan også tilbakestille store-en mellom testene ved å kalle reset-handlingen eller overskrive tilstanden med setState for å sikre isolerte tester.
import { useCounterStore } from '../counterStore';
before Each(() => {
useCounterStore.getState().reset();
});
test('increment increases count by 1', () => {
useCounterStore.getState().increment();
expect(useCounterStore.getState().count).toBe(1);
});
test('reset brings count back to 0', () => {
useCounterStore.setState({ count: 5 });
useCounterStore.getState().reset();
expect(useCounterStore.getState().count).toBe(0);
});Skjematilstand med Zustand
Zustand kan håndtere skjematilstand som må deles mellom flere skjermer i et flertrinnsskjema. Lagre feltverdier og nummeret på det gjeldende trinnet i store-en, og la hver skjerm lese og oppdatere bare sine egne felt. Ved endelig innsending henter du hele skjemadataene fra getState() i submit-handleren.
export const useFormStore = create<FormStore>((set) => ({
step: 1,
name: '',
email: '',
password: '',
setField: (field, value) => set({ [field]: value }),
nextStep: () => set((state) => ({ step: state.step + 1 })),
reset: () => set({ step: 1, name: '', email: '', password: '' }),
}));Hurtigsjekk
Test forståelsen din av konseptene innen React Native Mobile Development fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte du at å kalle store-hooken med en selektor abonnerer effektivt på bare tilstanden komponenten trenger, at Zustand-handlinger er vanlige funksjoner som du sender direkte til hendelsesbehandlere, og at store.subscribe gjør bivirkninger som hurtigbufring eller analyse mulig utenfor React-livssyklusen. Deretter skal vi se på hvordan du lagrer Zustand-tilstand permanent med AsyncStorage.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Lese og oppdatere store-tilstand i komponenter» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Lese og oppdatere store-tilstand i komponenter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Lese og oppdatere store-tilstand i komponenter»?
Få tilgang til store-verdier og handlinger i en React Native-komponent med useStore-hooken, og utløs oppdateringer fra knappetrykk eller skjemainnsendinger. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Lese og oppdatere store-tilstand i komponenter»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Opprette en Zustand-store
- Lese og oppdatere store-tilstand i komponenter
- Bevare Zustand-tilstand med AsyncStorage
- Slices-mønsteret og integrasjon med Devtools