Redux टूलकिट एक लोकप्रिय लाइब्रेरी है जो उपयोगिताओं और सम्मेलनों का एक सेट प्रदान करके Redux विकास को सरल बनाती है। इसमें एक रिड्यूसर और एक्शन क्रिएशन पैटर्न शामिल हैं जो Redux लॉजिक लिखने की प्रक्रिया को सुव्यवस्थित करते हैं। Redux Persist को Redux टूलकिट के साथ संयोजित करने से आपके रिएक्ट नेटिव ऐप्स में राज्य प्रबंधन की दक्षता और विश्वसनीयता में उल्लेखनीय वृद्धि हो सकती है।

एक्सपो-फ़ाइल-सिस्टम डिवाइस पर स्थानीय रूप से संग्रहीत फ़ाइल सिस्टम तक पहुंच प्रदान करता है। यह नेटवर्क यूआरएल से फ़ाइलें अपलोड और डाउनलोड करने में भी सक्षम है

redux-persist-expo-file-system-storage, redux-persist के लिए एक स्टोरेज इंजन है जो एक्सपो के फाइल सिस्टम एपीआई का उपयोग करता है। यह आपको अपने Redux स्टोर की स्थिति को डिवाइस के फ़ाइल सिस्टम पर जारी रखने की अनुमति देता है, यह सुनिश्चित करते हुए कि ऐप बंद होने या पुनरारंभ होने पर भी स्थिति सहेजी और पुनर्स्थापित की जाती है।

एक बार जब आप अपने Redux टूलकिट स्टोर को कॉन्फ़िगर कर लेते हैं, तो आप 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;

कोड लगातार स्टोरेज के लिए एक्सपो के फ़ाइल सिस्टम के साथ @reduxjs/toolkit और redux-persist का उपयोग करके रिएक्ट नेटिव ऐप में एक Redux स्टोर सेट करता है। यह एक काउंटर रिड्यूसर सहित रिड्यूसर को जोड़ती है, और यह सुनिश्चित करती है कि उनका राज्य ऐप के फ़ाइल सिस्टम के भीतर एक निर्दिष्ट निर्देशिका से सहेजा और लोड किया गया है।

// 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;

सेटअप के इस भाग में, हम @reduxjs/toolkit का उपयोग करके Redux स्टोर को कॉन्फ़िगर और बनाते हैं। हम रूटरेड्यूसर को आयात करते हैं जो हमारे रिड्यूसर को जोड़ता है और रिडक्स-पर्सिस्ट से क्रमांकन त्रुटियों को रोकने के लिए सीरियलाइज़ेबलचेक मिडलवेयर को अक्षम करता है। हमने राज्य दृढ़ता को सक्षम करने और हमारे रिएक्ट नेटिव एप्लिकेशन के साथ एकीकरण के लिए स्टोर और पर्सिस्टर दोनों को निर्यात करने के लिए रिडक्स-पर्सिस्ट भी स्थापित किया है। यह कॉन्फ़िगरेशन सुनिश्चित करता है कि हमारे ऐप की स्थिति बंद होने या ताज़ा होने के बाद भी बनी रहे।

// 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 };

configStore फ़ाइल में दस्तावेज़ निर्देशिका पथ को लॉग करने और समझने से, आपको बहुमूल्य जानकारी प्राप्त होती है कि आपका Redux Persist डेटा एक्सपो वातावरण में कहाँ संग्रहीत है। यह ज्ञान न केवल डिबगिंग में मदद करता है बल्कि यह भी सुनिश्चित करता है कि आपकी डेटा दृढ़ता रणनीति मजबूत और सुरक्षित है। अब आप आत्मविश्वास से अपने ऐप की स्थिति को प्रबंधित कर सकते हैं, यह जानकर कि आपका डेटा कहां रहता है।

इस निर्देशिका के भीतर, रिडक्स-पर्सिस्ट आपकी निरंतर स्थिति को संग्रहीत करेगा। आमतौर पर, कायम डेटा को पर्सिस्ट-काउंटर (या आपके कॉन्फ़िगरेशन के आधार पर कुछ इसी तरह) नामक फ़ाइल में संग्रहीत किया जाता है। यहां बताया गया है कि आप इस फ़ाइल पर कैसे नेविगेट कर सकते हैं और देख सकते हैं:

// persist-count file

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

पूरे उदाहरण के लिए, आप इस प्रोजेक्ट के लिए GitHub रिपॉजिटरी देख सकते हैं: GitHub रिपॉजिटरी लिंक

? मुझे इस विषय पर आपके विचार सुनना अच्छा लगेगा! यदि आपके पास Redux Persist के साथ एक्सपो फ़ाइल सिस्टम का उपयोग करने के बारे में कोई प्रश्न है, या यदि आपको कोई समस्या आती है, तो कृपया नीचे एक टिप्पणी छोड़ें। मैं मदद के लिए यहाँ हूँ! ?