Simplifying State Management in React Native with Zustand

State management is a crucial aspect of modern application development, and in React Native, managing state effectively can significantly enhance your app’s performance and maintainability. Zustand, a minimalistic state management library for React, provides an elegant and simple solution for handling state in React Native applications. In this blog, we'll explore Zustand, how it works, and why it might be the right choice for your React Native projects.

---

What is Zustand?

Zustand is a small, fast, and scalable state management solution for React applications. Its name, derived from the German word for "state," reflects its primary function: managing state efficiently. Zustand stands out due to its simplicity and ease of use, allowing you to create state stores with minimal boilerplate code.

Key Features of Zustand

• Minimal API: Zustand offers a simple API that makes managing state intuitive and straightforward.
• No Provider Component: Unlike other state management libraries, Zustand does not require a provider component, which can simplify your component tree.
• Reactivity: Zustand integrates seamlessly with React’s built-in hooks, making it reactive and efficient.
• Middleware Support: Zustand supports middleware for enhanced functionality, such as persistence and logging.

---

Getting Started with Zustand

1. Installation

First, you need to install Zustand in your React Native project. Open your terminal and run:

npm install zustand

or

yarn add zustand

---

2. Creating a Store

Zustand uses a store to manage state. A store is a JavaScript object that holds the state and provides methods to update it.

In zustand

a) set
Purpose: To update the state of your store.
How It Works: You use it to modify the state. You provide a function that receives the current state and returns the new state.

b) get
Purpose: To read the current state of the store.
How It Works: You use it to access the current state for reading or making decisions.

Here’s a simple example of creating a Zustand store and usage:

myStore1.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;

Usage:
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;

In this example:

• create is a function from Zustand that initializes the store.
• set is a function provided by Zustand to update the store.
• count is a piece of state managed by the store.
• increase and decrease are actions that modify the state.
• get is to read the current state of the store
• myStore1 We use the hook to get the current state value and action functions.

---

Advanced Usage

1. Middleware

Zustand supports middleware to enhance its functionality. For example, you can use the persist middleware to save and load state from AsyncStorage/MMKV:

a) Zustand with 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 with MMKV

i) Create mmkv configuration file 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
        }
    )
);

Best Practices

• Keep Stores Small: To maintain clarity and simplicity, keep Zustand stores focused and small. If your store becomes too large, consider breaking it into smaller, modular stores.
• Use Middleware Wisely: Only use middleware when necessary. It can add complexity and overhead, so apply it based on your needs.
• Leverage React Native’s Hooks: Zustand integrates well with React’s hooks, so take advantage of hooks like useEffect and useCallback to manage side effects and optimize performance.

---

Conclusion

Zustand provides a minimalist and efficient approach to state management in React Native applications. Its simple API, reactivity, and middleware support make it an excellent choice for managing state in both small and large projects. By following the examples and best practices outlined in this blog, you can integrate Zustand seamlessly into your React Native app and enjoy a cleaner, more maintainable state management solution.

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

The above is the detailed content of Simplifying State Management in React Native with Zustand. For more information, please follow other related articles on the PHP Chinese website!