چرا zustand-mmkv-storage رو ساختم؟ (داستان یه دردسر React Native 😅)

چند ماه پیش، در حال ساخت یک اپلیکیشن React Native با Zustand برای مدیریت حالت بودم. همه چیز عالی به نظر می‌رسید API ساده، بدون boilerplate زیاد، تجربه توسعه فوق‌العاده.

اما وقتی نوبت به ذخیره‌سازی حالت رسید، (مثل توکن لاگین، تنظیمات کاربر، سبد خرید) مشکلات شروع شد.

ابتدا از AsyncStorage استفاده کردم. کار می‌کرد... اما کند بود. نوشتن و خواندن داده‌ها گاهی باعث لگ رابط کاربری می‌شد و برای داده‌های حساس هیچ رمزنگاری داخلی نداشت.

می‌دانستم MMKV استاندارد طلایی ذخیره‌سازی سریع در React Native است، اما هر بار اتصال دستی آن به persist در Zustand، تکراری و پرخطا بود.

پس تصمیم گرفتم یک بار برای همیشه این مشکل را حل کنم و zustand-mmkv-storage متولد شد.

مشکل ذخیره‌سازی سنتی در React Native

در اپلیکیشن‌های موبایل، ذخیره‌سازی اجباری است:

• کاربر انتظار دارد تم تاریک/روشن حفظ شود

• سبد خرید با بستن اپ خالی نشود

• جلسه لاگین بعد از ری‌استارت گوشی ادامه داشته باشد

سال‌ها AsyncStorage راه‌حل پیش‌فرض بود. ساده است و همه‌جا کار می‌کند.

اما واقعیت در سال ۲۰۲۵:

• کاملاً مبتنی بر جاوااسکریپت

• فقط async که سبب لگ UI میشه

• بدون رمزنگاری

• توسط تیم اصلی React Native منسوخ شده

بنچمارک‌ها نشان می‌دهند MMKV در سناریوهای واقعی ۳۰ تا ۱۰۰ برابر سریع‌تر از AsyncStorage است.

کشف MMKV: تغییر دهنده بازی برای عملکرد

MMKV (توسعه‌یافته توسط Tencent و اکنون توسط Marc Rousavy نگهداری می‌شود) یک ذخیره‌ساز key-value مدرن است که برای سرعت ساخته شده:

• هسته ++C با binding های JSI

• خواندن همزمان (بدون await)

• رمزنگاری داخلی

• ایمن برای multi-process، حجم کم، سازگار با Expo

در اپ‌های بزرگ تولید استفاده می‌شود و توصیه پیش‌فرض برای ذخیره‌سازی با عملکرد بالا شده است.

Middleware Persist در Zustand

persist در Zustand فوق‌العاده است فقط store را wrap کنید و سریالایزیشن/هیدراته شدن را مدیریت می‌کند.

اما نیاز به یک backend ذخیره‌سازی خوب دارد. اتصال دستی MMKV یعنی:

• کد تکراری

• عدم اشتراک‌گذاری هوشمند instance

• باگ‌های آسان در هیدراته شدن

راه‌حل من: zustand-mmkv-storage

zustand-mmkv-storage را ساختم یک آداپتور کوچک (<1KB) که MMKV را مستقیماً با Zustand هماهنگ می‌کند.

ویژگی‌هایی که روی آن‌ها تمرکز کردم:

• Lazy dynamic import

• Global instance caching

• پشتیبانی کامل از رمزنگاری

• چندین store ایزوله

• بهترین شیوه‌های هیدراته شدن داخلی

• سازگار با Expo و React Native

شروع کار

npm install zustand-mmkv-storage zustand react-native-mmkv

مثال ساده

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { mmkvStorage } from 'zustand-mmkv-storage';

export const useCounterStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'counter',
      storage: createJSONStorage(() => mmkvStorage),
    }
  )
);

مثال پیشرفته: توکن لاگین رمزنگاری‌شده

import { createMMKVStorage } from 'zustand-mmkv-storage';

const encryptedStorage = createMMKVStorage({
  id: 'auth-vault',
  encryptionKey: 'secret',
});

export const useAuthStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth',
      storage: createJSONStorage(() => encryptedStorage),
    }
  )
);

حالا توکنت روی دیسک رمزنگاری شده و کاملاً جدا از بقیه داده‌هاست.

کجا ازش استفاده کنی؟

• توکن احراز هویت

• تنظیمات اپ (تم، زبان)

• سبد خرید آفلاین

• وضعیت onboarding

• فیچر فلگ‌ها

حرف آخر

بعد از سوئیچ به zustand-mmkv-storage اپ‌هام واقعاً سریع‌تر شدن دیگه منتظر ذخیره‌سازی نیستم.

اگه تو هم Zustand تو React Native استفاده می‌کنی، حتماً امتحانش کن:

npm i zustand-mmkv-storage

گیت‌هاب - npm

خوشت اومد، یه ⭐ روی گیت‌هاب بزن کلی انرژی می‌ده! 😍

ممنون که خوندی بریم React Native رو سریع‌تر کنیم🐻✨

#react-native #open-source #zustand #mobile-development #mmkv #react-native-storage #persist