ما هو ال persistStore, persistReducer فى ريأكت ناتيف ريدكس

باستخدامك لمكتبة Redux لإدارة الحالة داخل تطبيقك تنشئ عادة مخزن store وهو مخزن يعبر عن حالة التطبيق الحالية،
هذا المخزن ليس إلا متحول عادي يخزن في الذاكرة العشوائية RAM عند عمل التطبيق ويتم حذفه من الذاكرة عند انتهاء عمل التطبيق
مكتبة redux-persist تمكنك من تخزين حالة التطبيق في الذاكرة الدائمة واستعادتها عند بدء التطبيق

 كلمة persist تعني هنا الإبقاء أو الحفظ

بتاريخ 6 ساعات قال أحمد ابراهيم عبد الله:

persistReducer

دالة مسؤولة عن تحديد مكان تخزين كل قطعة من بنية الحالة من مخزنك وتمييزها بمفتاح معين، عادة تقوم بتخزين المخزن ككل في قطعة واحدة كما التالي

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import rootReducer from './reducers'

const persistConfig = {
  key: 'root', // مفتاح للتمييز
  storage, // مكان التخزين
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)

بتاريخ 6 ساعات قال أحمد ابراهيم عبد الله:

persistStore

تعني حفظ المخزن وهي دالة مسؤولة عن حفظ المخزن واستعادته عند بدء التطبيق

// مخزن عادي يخزن في الذاكرة
let store = createStore(persistedReducer)

// تعزيز المخزن العادي بحفظه واستعادته
let persistor = persistStore(store)


const App = () => {
  return (
    <Provider store={store}>
    	/* نمرر المخزن المعزز */
    	<PersistGate loading={null} persistor={persistor}>
    ...

Redux Persist هي مكتبة شهيرة تتيح لك إضافة الحفظ إلى المتجر. ستقوم المكتبة تلقائيًا بحفظ المتجر في كل مرة يتم فيها تحديث الحالة. لست بحاجة إلى كتابة أي رمز للحفظ في actions او reducers.

import {createStore} from "redux";
import {persistStore, persistReducer} from "redux-persist";
import storage from "redux-persist/lib/storage";
 
const state = {authenticated: false};
 
const reducer = (state, action) => ({...state, ...action});
 
const persistConfig = {
    key: "root",
    storage
};
 
const persistedReducer = persistReducer(persistConfig, reducer);
 
const store = createStore(persistedReducer, state);
 
const persistor = persistStore(store);

تقبل الدالة persistReducer () كائن التكوين كمعاملها الأول. يجب تحديد المفتاح وخصائص التخزين.

يعيّن المفتاح اسم خاصية المستوى الأعلى في الكائن المستمر. سيتم حفظ حالة متجرك كقيمة لهذه الخاصية.

يحدد التخزين محرك التخزين المراد استخدامه. يدعم Redux Persist العديد من خلفيات التخزين المختلفة اعتمادًا على البيئة. لاستخدام الويب ، يتم دعم كل من واجهات برمجة تطبيقات التخزين المحلي و sessionStorage بالإضافة إلى ملفات تعريف الارتباط الأساسية. تتوفر الخيارات أيضًا لـ React Native و Node.js و Electron والعديد من الأنظمة الأساسية الأخرى.

يمكنك تحديد محرك التخزين المراد استخدامه عن طريق استيراده من الحزمة الخاصة به. يجب بعد ذلك تمرير كائن تنفيذ API الرئيسي كخيار تخزين إلى Redux Persist.

الكائن الثابت الذي تم إرجاعه من استدعاءات persistStore () له عدة طرق مساعدة للسماح لك بإدارة الحفظ.

يمكنك إيقاف الحفظ مؤقتًا واستئنافها باستخدام أساليب الإيقاف pause() resume() على التوالي. يمكنك فرض كتابة فورية على محرك التخزين باستخدام flush (). يمكن أن يكون هذا مفيدًا إذا كنت بحاجة إلى ضمان استمرار حالتك بعد عملية معينة.

يمكنك مسح كافة البيانات المستمرة من محرك التخزين باستخدام .purge (). في معظم الحالات ، يجب تجنب ذلك - يجب عليك استخدام إجراء Redux لمسح متجرك ، والذي سينتشر تلقائيًا بعد ذلك إلى البيانات الدائمة.