Storestatus in componenten lezen en bijwerken
Gebruik de useStore-hook om storewaarden en acties in een React Native-component te benaderen en activeer updates via het indrukken van knoppen of het verzenden van formulieren.
Storestatus in componenten lezen en bijwerken is een gratis React Native Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Een component met Zustand verbinden
Een Zustand-store in een component gebruiken is zo eenvoudig als de store-hook bovenaan de functie aanroepen. De hook is hetzelfde object dat door create wordt teruggegeven. Je kunt een selector doorgeven om specifieke waarden te selecteren, of acties rechtstreeks lezen. Je hoeft useSelector of useDispatch niet te importeren: de store-hook handelt alles af.
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>
);
}Meerdere waarden efficiënt selecteren
Om meerdere waarden uit een Zustand-store te lezen zonder overmatige nieuwe renders te veroorzaken, heb je twee opties. Je kunt de store-hook meerdere keren aanroepen met afzonderlijke selectors, waarbij elke abonnement onafhankelijk is, of je kunt een object teruggeven en de gelijkheidshulp shallow gebruiken om elke eigenschap afzonderlijk te vergelijken.
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
);Updates door knopdrukken activeren
Zustand-acties zijn gewone JavaScript-functies, dus je geeft ze rechtstreeks door aan gebeurtenisafhandelaars van React Native, zoals onPress. Je hoeft geen actieobject te dispatchen of een hulpfunctie aan te roepen: roep de functie gewoon aan. Daardoor is de code van de component overzichtelijker en gemakkelijker te lezen dan bij het dispatchpatroon van Redux.
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>
);
}Storestatus in een FlatList lezen
Zustand-stores werken vanzelfsprekend samen met FlatList van React Native. Selecteer de array uit de store en geef deze door aan de prop data. Zustand rendert deze component alleen opnieuw wanneer de verwijzing naar de array verandert. Dat gebeurt wanneer een store-actie de array met items vervangt of muteert en via set een nieuwe verwijzing teruggeeft.
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>
)}
/>
);
}Geneste status bijwerken
Wanneer de status van je store geneste objecten bevat, geef je een functie door aan set en verspreid je het geneste niveau dat je wilt bijwerken. Zonder verspreiding zou set de sleutel op het hoogste niveau volledig vervangen, waardoor andere geneste eigenschappen verloren gaan. Je kunt ook de Immer-middleware gebruiken, die in de vorige les is behandeld, om geneste waarden rechtstreeks te muteren.
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 } })),
}));Optimistische UI-updates
Optimistische updates verbeteren de waargenomen prestaties door de UI onmiddellijk bij te werken wanneer de gebruiker een actie uitvoert, voordat je op het antwoord van de server wacht. Roep in Zustand set aan om de status meteen bij te werken en doe daarna de API-aanroep. Als de API mislukt, roep je set opnieuw aan om de status naar de vorige waarde terug te zetten.
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
),
}));
}
}Storestatus resetten
Een veelgebruikt patroon is een actie reset toevoegen die de store naar de beginstatus terugbrengt. Sla de beginstatus op in een constante buiten de aanroep van create en verwijs ernaar in de resetactie. Dit is handig bij uitlogprocedures waarbij je alle gebruikersgegevens tegelijk uit elke store wilt verwijderen.
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
}));Storewijzigingen volgen met subscribe
Met useStore.subscribe kun je reageren op wijzigingen in de store buiten React-componenten, bijvoorbeeld door naar AsyncStorage te schrijven wanneer instellingen veranderen of analysegebeurtenissen te loggen wanneer specifieke statusovergangen plaatsvinden. Zeg het abonnement altijd op in de opruimfunctie om geheugenlekken te voorkomen.
useEffect(() => {
const unsubscribe = useSettingsStore.subscribe(
(state) => state.theme,
(theme) => {
console.log('Theme changed to:', theme);
AsyncStorage.setItem('theme', theme);
}
);
return unsubscribe; // cleanup on unmount
}, []);Status tussen schermen delen
Omdat Zustand-stores buiten elke componentenboom leven, zijn ze ideaal om status tussen schermen te delen zonder props door te geven of parameters van React Navigation te gebruiken. Scherm A werkt de store bij en scherm B leest eruit; beide zien onmiddellijk dezelfde actuele status. Dit is veel eenvoudiger dan gegevens doorgeven via routeparameters in diep geneste navigatiestructuren.
// 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);Zustand-storeacties testen
Een Zustand-store testen is eenvoudig omdat deze geen afhankelijkheden van React heeft. Importeer de store, roep acties rechtstreeks aan op getState() en controleer de bijgewerkte waarden. Je kunt de store ook tussen tests resetten door de resetactie aan te roepen of de status te overschrijven met setState, zodat tests van elkaar geïsoleerd blijven.
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);
});Formulierstatus met Zustand
Zustand kan formulierstatus beheren die tussen meerdere schermen in een formulierproces met meerdere stappen moet worden gedeeld. Sla veldwaarden en het huidige stapnummer op in de store en laat elk scherm alleen zijn eigen velden lezen en bijwerken. Bij de definitieve verzending haal je de volledige formuliergegevens op uit getState() in de verzendhandler.
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: '' }),
}));Korte controle
Toets je begrip van de concepten voor mobiele ontwikkeling met React Native uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat de store-hook met een selector aanroepen een component efficiënt abonneert op alleen de status die deze nodig heeft, dat Zustand-acties gewone functies zijn die je rechtstreeks aan gebeurtenisafhandelaars doorgeeft, en dat store.subscribe neveneffecten zoals caching of analyse buiten de levenscyclus van React mogelijk maakt. Hierna bekijken we hoe je Zustand-status met AsyncStorage bewaart.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Storestatus in componenten lezen en bijwerken” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Storestatus in componenten lezen en bijwerken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Storestatus in componenten lezen en bijwerken”?
Gebruik de useStore-hook om storewaarden en acties in een React Native-component te benaderen en activeer updates via het indrukken van knoppen of het verzenden van formulieren. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Storestatus in componenten lezen en bijwerken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een Zustand-store maken
- Storestatus in componenten lezen en bijwerken
- Zustand-status persistent maken met AsyncStorage
- Het slices-patroon en DevTools-integratie