Zustand を使用した React Native の状態管理の簡素化

状態管理は最新のアプリケーション開発の重要な側面であり、React Native では状態を効果的に管理することで、アプリのパフォーマンスと保守性を大幅に向上させることができます。 React 用の最小限の状態管理ライブラリである Zustand は、React Native アプリケーションで状態を処理するための洗練されたシンプルなソリューションを提供します。このブログでは、Zustand とその仕組み、そしてそれが React Native プロジェクトに最適な理由について探っていきます。

---

ズスタンドとは何ですか？

Zustand は、React アプリケーション向けの小型、高速、スケーラブルな状態管理ソリューションです。その名前はドイツ語の「状態」に由来し、その主な機能である状態を効率的に管理することを反映しています。 Zustand はそのシンプルさと使いやすさで際立っており、最小限の定型コードでステート ストアを作成できます。

Zustandの主な特徴

• 最小限の API: Zustand は、状態の管理を直感的かつ簡単にするシンプルな API を提供します。
• プロバイダー コンポーネントなし: 他の状態管理ライブラリとは異なり、Zustand はプロバイダー コンポーネントを必要としないため、コンポーネント ツリーを簡素化できます。
• 反応性: Zustand は React の組み込みフックとシームレスに統合し、反応性と効率性を高めます。
• ミドルウェアのサポート: Zustand は、永続性やロギングなどの拡張機能用のミドルウェアをサポートしています。

---

Zustand を始める

1. インストール

まず、React Native プロジェクトに Zustand をインストールする必要があります。ターミナルを開いて次を実行します:

npm install zustand

または

yarn add zustand

---

2. ストアの作成

Zustand はストアを使用して状態を管理します。ストアは、状態を保持し、それを更新するメソッドを提供する JavaScript オブジェクトです。

ズスタンドにて

a) セット
目的: ストアの状態を更新するため。
仕組み: 状態を変更するために使用します。現在の状態を受け取り、新しい状態を返す関数を提供します。

b) 入手
目的: ストアの現在の状態を読み取るため。
仕組み: 読み取りまたは決定を行うために現在の状態にアクセスするために使用します。

Zustand ストアの作成と使用方法の簡単な例を次に示します。

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;

使用法:
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;

この例では:

• create は、ストアを初期化する Zustand の関数です。
• set は、Zustand が提供するストアを更新する機能です。
• count はストアによって管理される状態の一部です。
• 増加と減少は状態を変更するアクションです。
• get はストアの現在の状態を読み取ることです
• myStore1 フックを使用して、現在の状態値とアクション関数を取得します。

---

高度な使用法

1. ミドルウェア

Zustand は、機能を強化するミドルウェアをサポートしています。たとえば、永続ミドルウェアを使用して、AsyncStorage/MMKV から状態を保存およびロードできます:

a) React Native 非同期ストレージを使用した Zustand

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) MMKV によるズスタンド

i) 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)ScansStore.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
        }
    )
);

ベストプラクティス

• ストアを小さく保つ: 明確さとシンプルさを維持するために、Zustand ストアは焦点を絞って小さく保ちます。ストアが大きすぎる場合は、より小さなモジュール式ストアに分割することを検討してください。
• ミドルウェアを賢く使用する: ミドルウェアは必要な場合にのみ使用してください。複雑さとオーバーヘッドが増加する可能性があるため、ニーズに基づいて適用してください。
• React Native のフックを活用する: Zustand は React のフックとうまく統合されているため、useEffect や useCallback などのフックを活用して副作用を管理し、パフォーマンスを最適化します。

---

結論

Zustand は、React Native アプリケーションの状態管理に対する最小限かつ効率的なアプローチを提供します。シンプルな API、反応性、ミドルウェアのサポートにより、小規模プロジェクトと大規模プロジェクトの両方で状態を管理するための優れた選択肢となります。このブログで概説されている例とベスト プラクティスに従うことで、Zustand を React Native アプリにシームレスに統合し、よりクリーンで保守性の高い状態管理ソリューションを活用できます。

関連投稿:
https://dev.to/ajmal_hasan/react-native-mmkv-5787
https://dev.to/ajmal_hasan/reactotron-setup-in-react-native-redux-applications-4jj3

以上がZustand を使用した React Native の状態管理の簡素化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。