Memudahkan Pengurusan Negeri dalam React Native dengan Zustand

Pengurusan negeri ialah aspek penting dalam pembangunan aplikasi moden dan dalam React Native, keadaan pengurusan secara berkesan boleh meningkatkan prestasi dan kebolehselenggaraan apl anda dengan ketara. Zustand, perpustakaan pengurusan keadaan minimalis untuk React, menyediakan penyelesaian yang elegan dan mudah untuk mengendalikan keadaan dalam aplikasi React Native. Dalam blog ini, kami akan meneroka Zustand, cara ia berfungsi dan sebab ia mungkin pilihan yang tepat untuk projek React Native anda.

Apa itu Zustand?

Zustand ialah penyelesaian pengurusan keadaan yang kecil, pantas dan berskala untuk aplikasi React. Namanya, berasal daripada perkataan Jerman untuk "negeri," mencerminkan fungsi utamanya: mengurus negeri dengan cekap. Zustand terserlah kerana kesederhanaan dan kemudahan penggunaannya, membolehkan anda membuat kedai negeri dengan kod plat dandang yang minimum.

Ciri-ciri Utama Zustand

• API Minimum: Zustand menawarkan API mudah yang menjadikan pengurusan keadaan intuitif dan mudah.
• Tiada Komponen Pembekal: Tidak seperti perpustakaan pengurusan negeri lain, Zustand tidak memerlukan komponen pembekal, yang boleh memudahkan pepohon komponen anda.
• Kereaktifan: Zustand disepadukan dengan lancar dengan cangkuk terbina dalam React, menjadikannya reaktif dan cekap.
• Sokongan Perisian Tengah: Zustand menyokong perisian tengah untuk kefungsian yang dipertingkatkan, seperti kegigihan dan pengelogan.

Bermula dengan Zustand

1. Pemasangan

Pertama, anda perlu memasang Zustand dalam projek React Native anda. Buka terminal anda dan jalankan:

npm install zustand

atau

yarn add zustand

2. Mewujudkan Kedai

Zustand menggunakan kedai untuk menguruskan keadaan. Kedai ialah objek JavaScript yang memegang keadaan dan menyediakan kaedah untuk mengemas kininya.

Dalam zustand

a) set
Tujuan: Untuk mengemas kini keadaan kedai anda.
Cara Ia Berfungsi: Anda menggunakannya untuk mengubah suai keadaan. Anda menyediakan fungsi yang menerima keadaan semasa dan mengembalikan keadaan baharu.

b) dapatkan
Tujuan: Untuk membaca keadaan semasa kedai.
Cara Ia Berfungsi: Anda menggunakannya untuk mengakses keadaan semasa untuk membaca atau membuat keputusan.

Berikut ialah contoh mudah untuk mencipta kedai Zustand dan penggunaan:

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;

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

Dalam contoh ini:

• create ialah fungsi daripada Zustand yang memulakan kedai.
• set ialah fungsi yang disediakan oleh Zustand untuk mengemas kini kedai.
• count ialah sekeping negeri yang diuruskan oleh kedai.
• peningkatan dan penurunan adalah tindakan yang mengubah suai keadaan.
• dapatkan ialah membaca keadaan semasa kedai
• myStore1 Kami menggunakan cangkuk untuk mendapatkan nilai keadaan semasa dan fungsi tindakan.

Penggunaan Lanjutan

1. Middleware

Zustand menyokong perisian tengah untuk meningkatkan fungsinya. Sebagai contoh, anda boleh menggunakan perisian tengah berterusan untuk menyimpan dan memuatkan keadaan daripada AsyncStorage/MMKV:

a) Zustand dengan Storan Async Asli React

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 dengan MMKV

i) Cipta storan fail konfigurasi mmkv.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
        }
    )
);

Amalan Terbaik

• Kekalkan Kedai Kecil: Untuk mengekalkan kejelasan dan kesederhanaan, pastikan kedai Zustand fokus dan kecil. Jika kedai anda menjadi terlalu besar, pertimbangkan untuk memecahkannya kepada kedai modular yang lebih kecil.
• Gunakan Middleware dengan Bijak: Hanya gunakan middleware apabila perlu. Ia boleh menambah kerumitan dan overhed, jadi gunakannya berdasarkan keperluan anda.
• Leverage React Native’s Hooks: Zustand disepadukan dengan baik dengan React’s hooks, jadi manfaatkan cangkuk seperti useEffect dan useCallback untuk mengurus kesan sampingan dan mengoptimumkan prestasi.

Kesimpulan

Zustand menyediakan pendekatan minimalis dan cekap kepada pengurusan negeri dalam aplikasi React Native. Sokongan API, kereaktifan dan perisian tengahnya yang mudah menjadikannya pilihan yang sangat baik untuk mengurus keadaan dalam kedua-dua projek kecil dan besar. Dengan mengikuti contoh dan amalan terbaik yang digariskan dalam blog ini, anda boleh menyepadukan Zustand dengan lancar ke dalam apl React Native anda dan menikmati penyelesaian pengurusan negeri yang lebih bersih dan boleh diselenggara.

Siaran Berkaitan:
https://dev.to/ajmal_hasan/react-native-mmkv-5787
https://dev.to/ajmal_hasan/reactron-setup-in-react-native-redux-applications-4jj3

Atas ialah kandungan terperinci Memudahkan Pengurusan Negeri dalam React Native dengan Zustand. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!