Lire et mettre à jour l’état du magasin dans les composants
Accédez aux valeurs et aux actions du magasin dans un composant React Native avec le hook useStore, puis déclenchez des mises à jour depuis des appuis sur des boutons ou l’envoi de formulaires.
Lire et mettre à jour l’état du magasin dans les composants est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Connecting a Component to Zustand
Using a Zustand store in a component is as simple as calling the store hook at the top of the function. The hook is the same object returned by create. You can pass a selector to pick specific values, or read actions directly. No import of useSelector or useDispatch is required — the store hook handles everything.
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>
);
}Selecting Multiple Values Efficiently
To read multiple values from a Zustand store without causing excessive re-renders, you have two options. You can call the store hook multiple times with individual selectors (each subscription is independent), or you can return an object and use the shallow equality helper to compare each property separately.
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
);Triggering Updates from Button Presses
Zustand actions are plain JavaScript functions, so you pass them directly to React Native event handlers like onPress. You do not need to dispatch an action object or call a helper — just call the function. This makes the component code cleaner and easier to read compared to the Redux dispatch pattern.
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>
);
}Reading Store State in a FlatList
Zustand stores work naturally with React Native's FlatList. Select the array from the store and pass it to the data prop. Zustand only re-renders this component when the array reference changes, which happens when your store action replaces or mutates the items array and returns a new reference 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>
)}
/>
);
}Updating Nested State
When your store state has nested objects, pass a function to set and spread the nested level you want to update. Without spreading, set would replace the top-level key entirely, wiping out other nested properties. Alternatively, use the Immer middleware (covered in the previous lesson) to mutate nested values directly.
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 } })),
}));Optimistic UI Updates
Optimistic updates improve perceived performance by updating the UI immediately when the user takes an action, before waiting for the server response. In Zustand, call set to update state immediately, then make the API call. If the API fails, call set again to revert the state to its previous value.
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
),
}));
}
}Resetting Store State
A common pattern is to add a reset action that restores the store to its initial state. Store the initial state in a constant outside the create call and reference it in the reset action. This is useful for logout flows where you need to clear all user data from every store at once.
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
}));Watching Store Changes with subscribe
useStore.subscribe lets you react to store changes outside of React components — for example, writing to AsyncStorage whenever settings change, or logging analytics events when specific state transitions occur. Always unsubscribe in the cleanup function to avoid memory leaks.
useEffect(() => {
const unsubscribe = useSettingsStore.subscribe(
(state) => state.theme,
(theme) => {
console.log('Theme changed to:', theme);
AsyncStorage.setItem('theme', theme);
}
);
return unsubscribe; // cleanup on unmount
}, []);Sharing State Between Screens
Because Zustand stores live outside any component tree, they are perfect for sharing state between screens without prop drilling or React Navigation params. Screen A updates the store, Screen B reads from it — both see the same live state immediately. This is much simpler than passing data through route params for deep navigation hierarchies.
// 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);Testing Zustand Store Actions
Testing a Zustand store is straightforward because it has no dependencies on React. Import the store, call actions directly on getState(), and assert the updated values. You can also reset the store between tests by calling the reset action or overwriting state with setState to ensure test isolation.
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);
});Form State with Zustand
Zustand can manage form state that needs to be shared between multiple screens in a multi-step form flow. Store field values and a current step number in the store, and let each screen read and update only its own fields. On final submission, access the complete form data from getState() in the submit handler.
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: '' }),
}));Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
In this lesson you learned: calling the store hook with a selector efficiently subscribes a component to only the state it needs, Zustand actions are plain functions that you pass directly to event handlers, and store.subscribe enables side effects like caching or analytics outside the React lifecycle. Next up we explore persisting Zustand state with AsyncStorage.
Questions Fréquemment Posées
La leçon « Lire et mettre à jour l’état du magasin dans les composants » est-elle gratuite ?
Oui — le texte complet de « Lire et mettre à jour l’état du magasin dans les composants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Lire et mettre à jour l’état du magasin dans les composants » ?
Accédez aux valeurs et aux actions du magasin dans un composant React Native avec le hook useStore, puis déclenchez des mises à jour depuis des appuis sur des boutons ou l’envoi de formulaires. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Native Academy ?
Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Lire et mettre à jour l’état du magasin dans les composants » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?
Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer un magasin Zustand
- Lire et mettre à jour l’état du magasin dans les composants
- Conserver l’état Zustand avec AsyncStorage
- Modèle des tranches et intégration de DevTools