Simplifier la gestion des états dans React Native avec Zustand

La gestion de l'état est un aspect crucial du développement d'applications modernes, et dans React Native, une gestion efficace de l'état peut améliorer considérablement les performances et la maintenabilité de votre application. Zustand, une bibliothèque minimaliste de gestion d'état pour React, fournit une solution élégante et simple pour gérer l'état dans les applications React Native. Dans ce blog, nous explorerons Zustand, comment il fonctionne et pourquoi il pourrait être le bon choix pour vos projets React Native.

---

Qu’est-ce que Zustand ?

Zustand est une petite solution de gestion d'état rapide et évolutive pour les applications React. Son nom, dérivé du mot allemand signifiant « État », reflète sa fonction première : gérer efficacement l'État. Zustand se distingue par sa simplicité et sa facilité d'utilisation, vous permettant de créer des magasins d'État avec un minimum de code passe-partout.

Principales caractéristiques de Zustand

• API minimale : Zustand propose une API simple qui rend la gestion de l'état intuitive et simple.
• Aucun composant fournisseur : contrairement à d'autres bibliothèques de gestion d'état, Zustand ne nécessite pas de composant fournisseur, ce qui peut simplifier votre arborescence de composants.
• Réactivité : Zustand s'intègre parfaitement aux hooks intégrés de React, le rendant réactif et efficace.
• Prise en charge du middleware : Zustand prend en charge le middleware pour des fonctionnalités améliorées, telles que la persistance et la journalisation.

---

Premiers pas avec Zustand

1.Installation

Tout d'abord, vous devez installer Zustand dans votre projet React Native. Ouvrez votre terminal et exécutez :

npm install zustand

ou

yarn add zustand

---

2. Créer une boutique

Zustand utilise un magasin pour gérer l'état. Un magasin est un objet JavaScript qui contient l'état et fournit des méthodes pour le mettre à jour.

En Zustand

a) définir
Objectif : Mettre à jour l'état de votre boutique.
Comment ça marche : Vous l'utilisez pour modifier l'état. Vous fournissez une fonction qui reçoit l'état actuel et renvoie le nouvel état.

b) obtenir
Objectif : Lire l'état actuel du magasin.
Comment ça marche : vous l'utilisez pour accéder à l'état actuel pour lire ou prendre des décisions.

Voici un exemple simple de création d'une boutique Zustand et de son utilisation :

monBoutique1.jsx

import create from 'zustand';

// Create the store
const myStore1 = create((set, get) => ({
    items: [], // Initial state

    // Action to fetch items from an API
    fetchItems: async () => {
        try {
            const response = await fetch('https://api.example.com/items'); // Replace with your API URL
            const data = await response.json();
            set({ items: data });
        } catch (error) {
            console.error('Failed to fetch items:', error);
        }
    },

    // Action to add an item
    addItem: (item) => set((state) => ({
        items: [...state.items, item],
    })),

    // Action to remove an item
    removeItem: (id) => set((state) => ({
        items: state.items.filter(item => item.id !== id),
    })),

    // Action to get the count of items
    getItemCount: () => get().items.length,
}));

export default myStore1;

Utilisation :
App.jsx

import React, { useEffect } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import myStore1 from './myStore1'; // Adjust the path to where your store file is located

const App = () => {
    // Destructure actions and state from the store
    const { items, fetchItems, addItem, removeItem, getItemCount } = myStore1();

    // Fetch items when the component mounts
    useEffect(() => {
        fetchItems();
    }, [fetchItems]);

    const handleAddItem = () => {
        const newItem = { id: Date.now(), name: 'New Item' };
        addItem(newItem);
    };

    const handleRemoveItem = (id) => {
        removeItem(id);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.header}>Item List ({getItemCount()})</Text>
            <Button title="Add Item" onPress={handleAddItem} />
            <FlatList
                data={items}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (
                    <View style={styles.item}>
                        <Text>{item.name}</Text>
                        <Button title="Remove" onPress={() => handleRemoveItem(item.id)} />
                    </View>
                )}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    header: {
        fontSize: 24,
        marginBottom: 16,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
    },
});

export default App;

Dans cet exemple :

• create est une fonction de Zustand qui initialise le magasin.
• set est une fonction fournie par Zustand pour mettre à jour la boutique.
• count est un morceau d'état géré par le magasin.
• l'augmentation et la diminution sont des actions qui modifient l'état.
• obtenir, c'est lire l'état actuel du magasin
• myStore1 Nous utilisons le hook pour obtenir la valeur de l'état actuel et les fonctions d'action.

---

Utilisation avancée

1. Intergiciel

Zustand prend en charge le middleware pour améliorer ses fonctionnalités. Par exemple, vous pouvez utiliser le middleware persist pour enregistrer et charger l'état depuis AsyncStorage/MMKV :

a) Zustand avec React Native Async Storage

useScansStore.jsx

import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

// Create the store
export const useScansStore = create()(
    persist(
        (set, get) => ({
            fishes: 0, // Initial state
            addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
        }),
        {
            name: "food-storage", // Key used to store the data
            storage: createJSONStorage(() => AsyncStorage), // Use AsyncStorage for persistence
        }
    )
);

b) Zustand avec MMKV

i) Créer le fichier de configuration mmkv storage.jsx

import { MMKV } from "react-native-mmkv";

export const storage = new MMKV({
    id: 'my-app-storage',
    encryptionKey: 'some_encryption_key'
})

export const mmkvStorage = {
    setItem: (key, value) => {
        storage.set(key, value)
    },
    getItem: (key) => {
        const value = storage.getString(key)
        return value ?? null
    },
    removeItem: (key) => {
        storage.delete(key)
    },
}

ii)useScansStore.jsx

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import mmkvStorage from './mmkvStorage'; // Import the MMKV storage configuration

// Create the store
export const useScansStore = create()(
    persist(
        (set, get) => ({
            fishes: 0, // Initial state
            addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
        }),
        {
            name: "food-storage", // Key used to store the data
            storage: createJSONStorage(() => mmkvStorage), // Use MMKV for persistence
        }
    )
);

Meilleures pratiques

• Gardez les magasins petits : Pour maintenir la clarté et la simplicité, gardez les magasins Zustand concentrés et petits. Si votre magasin devient trop grand, envisagez de le diviser en magasins plus petits et modulaires.
• Utilisez judicieusement le middleware : utilisez le middleware uniquement lorsque cela est nécessaire. Cela peut ajouter de la complexité et des frais généraux, alors appliquez-le en fonction de vos besoins.
• Tirez parti des hooks de React Native : Zustand s'intègre bien aux hooks de React, alors profitez de hooks comme useEffect et useCallback pour gérer les effets secondaires et optimiser les performances.

---

Conclusion

Zustand propose une approche minimaliste et efficace de la gestion des états dans les applications React Native. Son API simple, sa réactivité et sa prise en charge de middleware en font un excellent choix pour gérer l'état dans les petits et grands projets. En suivant les exemples et les bonnes pratiques décrits dans ce blog, vous pouvez intégrer Zustand de manière transparente dans votre application React Native et profiter d'une solution de gestion d'état plus propre et plus maintenable.

Articles connexes :
https://dev.to/ajmal_hasan/react-native-mmkv-5787
https://dev.to/ajmal_hasan/reactotron-setup-in-react-native-redux-applications-4jj3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!