Redux Toolkit هي مكتبة شائعة تعمل على تبسيط عملية تطوير Redux من خلال توفير مجموعة من الأدوات المساعدة والاتفاقيات. وهو يشتمل على أنماط إنشاء المخفض والإجراء التي تعمل على تبسيط عملية كتابة منطق Redux. يمكن أن يؤدي الجمع بين Redux Persist وRedux Toolkit إلى تحسين كفاءة وموثوقية إدارة الحالة بشكل كبير في تطبيقات React Native.

يوفر نظام ملفات Expo الوصول إلى نظام الملفات المخزن محليًا على الجهاز. كما أنه قادر على تحميل وتنزيل الملفات من عناوين URL للشبكة

redux-persist-expo-file-system-storage هو محرك تخزين لـ redux-persist يستخدم واجهة برمجة تطبيقات نظام الملفات الخاصة بـ Expo. يتيح لك ذلك الاحتفاظ بحالة متجر Redux الخاص بك في نظام ملفات الجهاز، مما يضمن حفظ الحالة واستعادتها حتى إذا تم إغلاق التطبيق أو إعادة تشغيله.

بمجرد قيامك بتكوين متجر Redux Toolkit الخاص بك، يمكنك دمج Redux Persist. ابدأ بتثبيت التبعيات الضرورية:

npm i @reduxjs/toolkit 
npm i expo-file-system 
npm i redux-persist-expo-file-system-storage
npm i redux-persist

قمنا بإنشاء متجر Redux بسيط @reduxjs/toolkit لإدارة حالة العداد. نحدد حالة أولية بعدد 0 وننشئ شريحة تسمى عداد بمخفضين: الزيادة والنقصان، مما يؤدي إلى زيادة العدد وتقليله بمقدار 1، على التوالي. يتم تصدير الإجراءات والمخفض لاستخدامها في إعداد Redux، مما يسمح لنا بإدارة حالة العداد بسهولة عبر التطبيق.

// store/counter/counter.tsx
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
};

const counterSlice = createSlice({
  name: "couter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count  = 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

يقوم الكود بإعداد متجر Redux في تطبيق React Native باستخدام @reduxjs/toolkit ويستمر الإعادة مع نظام ملفات Expo للتخزين المستمر. فهو يجمع بين المخفضات، بما في ذلك مخفض العداد، ويضمن حفظ حالتها وتحميلها من دليل محدد داخل نظام ملفات التطبيق.

// store/ConfigureStore.js
import { combineReducers } from "@reduxjs/toolkit";
import { documentDirectory, EncodingType } from "expo-file-system";
import { createExpoFileSystemStorage } from "redux-persist-expo-file-system-storage";

import CounterReducer from "./counter/counter";
import { persistReducer } from "redux-persist";
console.log('Document Directory:',documentDirectory);
export const expoFileSystemStorage = createExpoFileSystemStorage({
  storagePath: `${documentDirectory}customPathName/`,
  encoding: EncodingType.UTF8,
  debug: true,
});
const persist = (key, reducer) =>
  persistReducer(
    {
      key,
      storage: expoFileSystemStorage,
    },
    reducer
  );

const combinePersistReducers = (keys) =>
  Object.keys(keys).reduce(
    (obj, key) => ({
      ...obj,
      [key]: persist(key, keys[key]),
    }),
    {}
  );

const reducers = combineReducers({
  ...combinePersistReducers({
    count: CounterReducer,
  }),
});

export default reducers;

في هذا الجزء من الإعداد، نقوم بتكوين وإنشاء متجر Redux باستخدام @reduxjs/toolkit. نحن نستورد rootReducer الذي يجمع بين مخفضاتنا ونقوم بتعطيل البرنامج الوسيط serializableCheck لمنع استمرار أخطاء التسلسل. قمنا أيضًا بإعداد redux-persist لتمكين ثبات الحالة وتصدير كل من المتجر والمستمر للتكامل مع تطبيق React Native الخاص بنا. يضمن هذا التكوين الحفاظ على حالة تطبيقنا حتى بعد إغلاقه أو تحديثه.

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import { persistStore } from "redux-persist";
import { Provider } from "react-redux";
import rootReducer from "./ConfigureStore";

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});
const persistor = persistStore(store);

export { store, persistor };

من خلال تسجيل مسار documentDirectory وفهمه في ملفconfigStore، يمكنك الحصول على رؤية قيمة حول مكان تخزين بيانات Redux Persist الخاصة بك في بيئة Expo. لا تساعد هذه المعرفة في تصحيح الأخطاء فحسب، بل تضمن أيضًا أن تكون استراتيجية استمرار البيانات الخاصة بك قوية وآمنة. يمكنك الآن إدارة حالة تطبيقك بثقة، ومعرفة مكان وجود بياناتك بالضبط.

ضمن هذا الدليل، سيقوم redux-persist بتخزين حالتك المستمرة. عادةً، يتم تخزين البيانات المستمرة في ملف يسمى Persist-counter (أو شيء مشابه، اعتمادًا على التكوين الخاص بك). إليك كيفية التنقل إلى هذا الملف وعرضه:

// persist-count file

{"count":"0","_persist":"{\"version\":-1,\"rehydrated\":true}"}

للحصول على مثال كامل، يمكنك التحقق من مستودع GitHub لهذا المشروع: رابط مستودع GitHub

؟ أحب أن أسمع أفكارك حول هذا الموضوع! إذا كانت لديك أي أسئلة حول استخدام نظام ملفات Expo مع Redux Persist، أو إذا واجهت أي مشكلات، فيرجى ترك تعليق أدناه. أنا هنا للمساعدة! ?