Web Development Redux Persist এবং Local Storage Integration গাইড ও নোট

Redux Persist একটি লায়ব্রেরি যা Redux স্টোরের স্টেটকে লোকাল স্টোরেজ বা অন্য কোনো প্রমিত ডাটা স্টোরেজে সঞ্চিত (persist) রাখার জন্য ব্যবহৃত হয়। এর মাধ্যমে অ্যাপ্লিকেশন রিলোড বা রিফ্রেশ হওয়ার পরেও স্টেট একই অবস্থায় ফিরে আসে, ফলে ইউজার এক্সপিরিয়েন্স আরও স্মুথ এবং দ্রুত হয়। Redux Persist ব্যবহার করে আপনি স্টোরের স্টেটকে লোকাল স্টোরেজ, সেশন স্টোরেজ, IndexedDB বা অন্যান্য স্টোরেজ সলিউশনগুলিতে সংরক্ষণ করতে পারেন।

Redux Persist কী?

Redux Persist হল একটি টুল যা Redux স্টোরের স্টেটকে প্রমিত ডাটাবেস (যেমন লোকাল স্টোরেজ) এ সঞ্চিত করে, যাতে স্টেট রিফ্রেশ বা অ্যাপ্লিকেশন পুনরায় লোড হওয়া সত্ত্বেও তা একই থাকে। এটি একাধিক স্টোরেজ ড্রাইভার সাপোর্ট করে, যেমন:

• Local Storage
• Session Storage
• IndexedDB
• AsyncStorage (React Native এর জন্য)

Redux Persist সাধারণত ব্যবহার করা হয় যখন আপনি চান, অ্যাপ্লিকেশনটি বন্ধ বা রিফ্রেশ হলেও ইউজারের ইনপুট বা নির্বাচন সংরক্ষিত থাকুক।

Redux Persist কিভাবে কাজ করে?

Redux Persist একটি persistReducer ফাংশন ব্যবহার করে যেটি রিডিউসারকে মুছে না ফেলে কেবল স্টেটের একটি অংশকে সঞ্চিত (persist) রাখে। এই সঞ্চিত অংশের স্টেট যখন অ্যাপ্লিকেশন রিলোড হয়, তখন স্বয়ংক্রিয়ভাবে পুনরুদ্ধার করা হয়। Redux Persist এর মূল কাজ হলো:

1. স্টোরের স্টেট সেভ করা: অ্যাপ্লিকেশন বন্ধ হওয়ার আগে স্টোরের স্টেট লোকাল স্টোরেজ বা সেশন স্টোরেজে সেভ করা।
2. স্টেট পুনরুদ্ধার করা: অ্যাপ্লিকেশন রিলোড হলে বা পুনরায় চালু হলে স্টোরের সেভ করা স্টেট আবার লোড করা।

Redux Persist এবং Local Storage Integration

এখানে Local Storage ব্যবহারের মাধ্যমে Redux Persist কীভাবে কাজ করে তা ব্যাখ্যা করা হবে।

১. Redux Persist ইনস্টল করা

প্রথমে, Redux Persist লাইব্রেরিটি ইনস্টল করতে হবে।

npm install redux-persist

২. Redux Persist ব্যবহার করে Redux স্টোর কনফিগার করা

Redux Persist ব্যবহার করতে হলে, স্টোর কনফিগারেশনে persistReducer এবং persistStore ব্যবহার করতে হয়। প্রথমে আপনি localStorage কে স্টোর হিসেবে ব্যবহার করবেন, তারপর Redux Persist-কে কনফিগার করবেন।

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Local Storage ড্রাইভার

// আপনার রিডিউসার
const rootReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
};

// Redux Persist কনফিগারেশন
const persistConfig = {
  key: 'root',  // স্টোরের মূল কী
  storage, // এখানে 'storage' হল Local Storage
};

// PersistReducer তৈরি করা
const persistedReducer = persistReducer(persistConfig, rootReducer);

// স্টোর তৈরি করা
const store = createStore(persistedReducer);

// Persistor তৈরি করা
const persistor = persistStore(store);

export { store, persistor };

এখানে:

• storage: Redux Persist-এ লোকাল স্টোরেজ ড্রাইভার।
• persistReducer: রিডিউসারকে Persist করার জন্য ব্যবহার করা হয়।
• persistStore: Redux Persist-এর স্টোর সঞ্চয় বা পুনরুদ্ধার করার জন্য ব্যবহৃত।

৩. React অ্যাপ্লিকেশন-এ Redux Persist ইন্টিগ্রেশন

এখন আপনি React অ্যাপ্লিকেশনে Redux Persist ব্যবহার করবেন। এর জন্য আপনাকে PersistGate কম্পোনেন্টটি ব্যবহার করতে হবে, যা অ্যাপ্লিকেশন রেন্ডার হওয়ার আগে স্টেট পুনরুদ্ধার করতে সাহায্য করে।

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store'; // আপনার স্টোর এবং persistor

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
        <div>
          <h1>Redux Persist with Local Storage</h1>
          {/* আপনার কম্পোনেন্টস */}
        </div>
      </PersistGate>
    </Provider>
  );
};

export default App;

এখানে:

• PersistGate: এটি অ্যাপ্লিকেশনটির রেন্ডারিং শুরুর আগে Redux Persist এর মাধ্যমে স্টেট পুনরুদ্ধার করতে সাহায্য করে।
• loading: এই প্রপটি ব্যবহার করে আপনি একটি লোডিং ইফেক্ট বা স্টেট প্রদর্শন করতে পারেন যতক্ষণ না স্টেট পুনরুদ্ধার হয়।

৪. অ্যাকশন ডিসপ্যাচ করা এবং স্টেট পরিবর্তন করা

Redux Persist এর সাথে একসাথে অ্যাকশন ডিসপ্যাচ করতে আপনি স্বাভাবিকভাবে Redux ব্যবহার করতে পারেন।

// Action Creators
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// Dispatching action
store.dispatch(increment());
store.dispatch(decrement());

Redux Persist-এর সাথে স্টোরের স্টেট পরিবর্তন করা হলে সেই স্টেট লোকাল স্টোরেজে সেভ হয়ে যাবে এবং অ্যাপ্লিকেশন রিলোড করার পর পুনরায় সেই স্টেট লোড হবে।

৫. Redux Persist এর কনফিগারেশন

Redux Persist এর কনফিগারেশন এবং সেটিংস কাস্টমাইজ করা সম্ভব। উদাহরণস্বরূপ, আপনি শুধুমাত্র কিছু নির্দিষ্ট অংশের স্টেট সঞ্চিত রাখতে পারেন বা সেশন স্টোরেজ ব্যবহার করতে পারেন।

কিছু কনফিগারেশন উদাহরণ:

const persistConfig = {
  key: 'root',
  storage: storage, // লোকাল স্টোরেজ
  whitelist: ['counter'], // শুধুমাত্র 'counter' স্টেট সঞ্চিত হবে
  blacklist: ['someNonPersistentState'], // কিছু স্টেট সঞ্চিত হবে না
};

• whitelist: এই কনফিগারেশন দিয়ে আপনি নির্দিষ্ট স্টেট অংশকে সঞ্চিত রাখতে পারেন।
• blacklist: এই কনফিগারেশন দিয়ে আপনি কিছু স্টেট অংশ বাদ দিতে পারেন।

Redux Persist এর সুবিধা

1. স্টেট পেরসিস্টেন্স: অ্যাপ্লিকেশন রিফ্রেশ বা পুনরায় লোড হওয়ার পরেও ইউজারের স্টেট সেভ থাকে।
2. স্টেট ব্যবস্থাপনার উন্নতি: Redux Persist ব্যবহার করে স্টেট ব্যবস্থাপনাকে আরও স্মার্ট এবং ব্যবহারযোগ্য করা যায়।
3. ইউজার এক্সপিরিয়েন্স উন্নতি: স্টেট সেভ থাকায় ইউজার পুনরায় অ্যাপ্লিকেশন ব্যবহার করার সময় আগের অবস্থায় ফিরে আসে, যা ইউজারের এক্সপিরিয়েন্সকে আরও স্মুথ করে তোলে।
4. কাস্টম কনফিগারেশন: Redux Persist এর মাধ্যমে আপনি স্টোরেজ ড্রাইভার এবং স্টেট কাস্টমাইজ করতে পারেন।

সারাংশ

Redux Persist হল একটি শক্তিশালী টুল যা Redux স্টোরের স্টেটকে লোকাল স্টোরেজ বা অন্য ডাটাবেসে সেভ করে, যাতে অ্যাপ্লিকেশন পুনরায় রিফ্রেশ বা লোড হওয়া সত্ত্বেও ইউজারের স্টেট অপরিবর্তিত থাকে। Redux Persist এবং Local Storage ইন্টিগ্রেশন ব্যবহার করে আপনি Redux স্টোরের স্টেটকে সেভ এবং পুনরুদ্ধার করতে পারেন, যা ইউজার এক্সপিরিয়েন্স এবং অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।

Redux Persist একটি লাইব্রেরি যা Redux স্টোরের স্টেটকে লোকাল স্টোরেজ (localStorage), সেশন স্টোরেজ (sessionStorage), বা অন্যান্য পদ্ধতিতে সংরক্ষণ করতে সাহায্য করে। এর মাধ্যমে, আপনি অ্যাপ্লিকেশন পুনরায় লোড করা হলেও স্টোরের পূর্বের স্টেট পুনরুদ্ধার করতে পারবেন। সাধারণত, ওয়েব অ্যাপ্লিকেশনগুলিতে যখন পেজ রিফ্রেশ করা হয়, তখন স্টোরের স্টেট হারিয়ে যায়। কিন্তু Redux Persist এই স্টেট সংরক্ষণ করে রাখে, ফলে ব্যবহারকারীর অভিজ্ঞতা বজায় থাকে এবং অ্যাপ্লিকেশনটির পারফরম্যান্স উন্নত হয়।

Redux Persist কী?

Redux Persist একটি টুল যা আপনাকে Redux স্টোরের স্টেটকে এমন একটি স্থানে সংরক্ষণ করতে সাহায্য করে যা ব্রাউজার বা ডিভাইসে সাশ্রয়ী। এটি মূলত ব্রাউজারের localStorage বা sessionStorage ব্যবহার করে স্টোরের ডেটা সংরক্ষণ করতে সক্ষম। Redux Persist আপনার Redux স্টোরের স্টেট সেভ করে রাখে এবং যখন অ্যাপ্লিকেশনটি পুনরায় লোড হয়, তখন সেগুলি পুনরুদ্ধার করতে সহায়তা করে।

Redux Persist এর মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনকে স্টেট পাসড পৃষ্ঠা রিফ্রেশ বা সেশন বন্ধ হওয়ার পরও আগের অবস্থা ধরে রাখতে পারবেন।

Redux Persist কেন ব্যবহার করবেন?

1. স্টেট সংরক্ষণ এবং পুনরুদ্ধার
   পেজ রিফ্রেশ বা সেশন পুনরায় শুরু হওয়ার পরও অ্যাপ্লিকেশনের স্টেটকে অপরিবর্তিত রাখা সম্ভব হয়। উদাহরণস্বরূপ, ব্যবহারকারীর লগইন স্টেট, থিম সেটিংস বা অন্য কোনো ডেটা।
   • ফায়দা: ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়, এবং ডেটা হারানোর সম্ভাবনা কমে যায়।

2. পারফরম্যান্স উন্নয়ন
   স্টোরের স্টেটকে localStorage বা sessionStorage-এ সংরক্ষণ করলে, অ্যাপ্লিকেশন রিফ্রেশের পর পুনরায় ফেচ করার প্রয়োজন হয় না, ফলে আপনার অ্যাপ্লিকেশন দ্রুত লোড হয়।
   • ফায়দা: অ্যাপ্লিকেশনটি দ্রুত লোড হয়, বিশেষত বড় ডেটা থাকা অ্যাপ্লিকেশনে।

3. ব্যবহারকারী অভিজ্ঞতা
   পেজ রিফ্রেশ বা ব্রাউজার ক্লোজ করার পরও ব্যবহারকারীর আগের সেশন সংরক্ষিত থাকে, যেমন লগইন করা স্টেট বা শপিং কার্ট ডেটা। এর ফলে, ব্যবহারকারীরা তাদের কার্যক্রম পুনরায় শুরু করতে পারবেন এবং পুনরায় লগইন করার প্রয়োজন হবে না।
   • ফায়দা: ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং আরো স্মুথ ব্যবহার নিশ্চিত হয়।

4. নিরাপত্তা এবং ডেটা অখণ্ডতা
   Redux Persist ব্যবহার করে, আপনি আপনার স্টোরের ডেটা নিরাপদে সেভ করতে পারবেন। স্টোরের ডেটা ইমিউটেবল থাকে এবং একশন বা রিডিউসারগুলো ব্যবহৃত হয় ডেটা পরিবর্তন করার জন্য, যা ডেটার অখণ্ডতা রক্ষা করতে সাহায্য করে।
   • ফায়দা: নিরাপদ ডেটা সংরক্ষণ এবং অখণ্ডতা বজায় রাখা।

Redux Persist ব্যবহার করার পদ্ধতি

1. Redux Persist ইন্সটল করা:

   প্রথমে আপনাকে Redux Persist লাইব্রেরিটি ইন্সটল করতে হবে:

   npm install redux-persist
   

2. Redux Persist কনফিগারেশন:

   Redux Persist ব্যবহার করতে হলে, আপনাকে persistReducer এবং persistStore ব্যবহার করতে হবে। নিচে একটি সাধারণ কনফিগারেশন দেওয়া হলো:

   import { createStore } from 'redux';
   import { persistStore, persistReducer } from 'redux-persist';
   import storage from 'redux-persist/lib/storage'; // localStorage বা sessionStorage
   import rootReducer from './reducers'; // আপনার রিডিউসার
   
   const persistConfig = {
     key: 'root', // কী যা দিয়ে স্টেট সংরক্ষণ করা হবে
     storage, // কোন স্টোরেজ ব্যবহার করা হবে
   };
   
   const persistedReducer = persistReducer(persistConfig, rootReducer);
   
   const store = createStore(persistedReducer);
   const persistor = persistStore(store);
   
   export { store, persistor };
   

   এখানে:

   • persistReducer রিডিউসারকে persist করে।
   • persistStore স্টোর এবং persist এর মধ্যে যোগাযোগ তৈরি করে।

3. PersistGate যুক্ত করা:

   অ্যাপ্লিকেশন রুট কম্পোনেন্টে PersistGate ব্যবহার করতে হবে যাতে স্টোর পুনরুদ্ধার করা যায়।

   import { PersistGate } from 'redux-persist/integration/react';
   import { store, persistor } from './store';
   
   function App() {
     return (
       <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
         <YourApp />
       </PersistGate>
     );
   }
   
   export default App;
   

   • loading: স্টোর পুনরুদ্ধারের আগে একটি লোডিং স্টেট দেখানোর জন্য ব্যবহৃত হয়।

Redux Persist এর সুবিধা

• স্মৃতি বজায় রাখা: স্টেট সংরক্ষণ এবং পুনরুদ্ধারের মাধ্যমে অ্যাপ্লিকেশনটি পুনরায় লোড হওয়ার পরেও পূর্বের অবস্থায় ফিরে আসে।
• পারফরম্যান্সের উন্নতি: স্টোরের ডেটা লোকাল স্টোরেজে সেভ করা থাকে, ফলে পুনরায় ডেটা ফেচ করার প্রয়োজন পড়ে না।
• ব্যবহারকারীর অভিজ্ঞতা উন্নত করা: ব্যবহারকারী ওয়েব পেজ রিফ্রেশ করার পরেও আগের সেশন ধরে রাখতে পারে।

সারাংশ

Redux Persist হলো একটি টুল যা Redux স্টোরের স্টেটকে লোকাল স্টোরেজ বা সেশন স্টোরেজে সংরক্ষণ করে রাখে, যাতে অ্যাপ্লিকেশন পুনরায় লোড হলেও পূর্বের স্টেট পুনরুদ্ধার করা যায়। এটি ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন, কারণ স্টেট পুনরায় ফেচ করার প্রয়োজন পড়ে না এবং ব্যবহারকারীরা তাদের সেশন হারান না।

Redux স্টেট সাধারণত মেমরিতে রাখা হয়, কিন্তু কিছু ক্ষেত্রে আপনি স্টেটকে LocalStorage বা SessionStorage-এ সংরক্ষণ করতে চান যাতে পৃষ্ঠা রিফ্রেশের পরেও স্টেট টিকে থাকে। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি ব্যবহারকারীর ডেটা বা পছন্দ সংরক্ষণ করতে চান যাতে অ্যাপ পুনরায় লোড করার পরও সেই ডেটা পুনরুদ্ধার করা যায়।

LocalStorage হলো একটি ব্রাউজার স্টোরেজ API যা ডেটা সেভ করে রাখে এবং পৃষ্ঠা রিফ্রেশ হলেও ডেটা অক্ষুণ্ণ থাকে।

Redux স্টেট LocalStorage এ সংরক্ষণ করার উপায়

স্টেটকে LocalStorage-এ সংরক্ষণ এবং পুনরুদ্ধার করার জন্য আপনাকে কিছু middleware তৈরি করতে হবে যা স্টোরে পরিবর্তন এলেই স্টেটকে LocalStorage-এ সেভ করবে এবং অ্যাপ্লিকেশন লোড হলে সেখান থেকে পুনরুদ্ধার করবে।

এখানে একটি সাধারণ উদাহরণ দেওয়া হলো, যাতে স্টেট LocalStorage এ সংরক্ষণ এবং পুনরুদ্ধার করা যায়:

১. LocalStorage থেকে Redux স্টেট পুনরুদ্ধার

প্রথমে, আপনাকে LocalStorage থেকে স্টেট পুনরুদ্ধার করতে হবে যখন অ্যাপ্লিকেশন লোড হয়।

// Redux স্টেট পুনরুদ্ধারের জন্য একটি helper ফাংশন
const loadState = () => {
  try {
    const serializedState = localStorage.getItem('reduxState');
    if (serializedState === null) {
      return undefined; // যদি কোনো স্টেট না থাকে, তাহলে undefined ফিরিয়ে দিন
    }
    return JSON.parse(serializedState); // স্টেট JSON থেকে প্যার্স করুন
  } catch (err) {
    console.error('Could not load state from LocalStorage', err);
    return undefined;
  }
};

এই ফাংশনটি LocalStorage থেকে reduxState নামক আইটেমটি খুঁজে বের করবে এবং এটি যদি থাকে তবে JSON প্যার্স করে রিটার্ন করবে। যদি LocalStorage এ কিছু না থাকে বা কোনো ত্রুটি ঘটে, তাহলে undefined রিটার্ন করবে।

২. Redux Store কনফিগার করা

এখন আমরা Redux স্টোর কনফিগার করবো এবং স্টেট লোড করার জন্য loadState ফাংশন ব্যবহার করব।

import { createStore } from 'redux';
import rootReducer from './reducers'; // আপনার রিডিউসার

// LocalStorage থেকে স্টেট লোড করা
const persistedState = loadState();

// Redux স্টোর তৈরি
const store = createStore(
  rootReducer,
  persistedState // এখানে persistedState দিয়ে স্টোর কনফিগার করা হচ্ছে
);

export default store;

এখানে, আমরা loadState ফাংশন ব্যবহার করে LocalStorage থেকে স্টেট লোড করছি এবং সেটি Redux স্টোরে প্রদান করছি।

৩. Redux স্টেট LocalStorage এ সংরক্ষণ করা

এখন আপনাকে একটি middleware তৈরি করতে হবে যা প্রতিবার স্টেট পরিবর্তন হলে LocalStorage-এ সেই স্টেট সেভ করবে। Redux স্টেট পরিবর্তন হলে এটি LocalStorage-এ সংরক্ষণ করবে।

// Redux স্টেট LocalStorage এ সেভ করার জন্য helper ফাংশন
const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state); // স্টেট JSON এ কনভার্ট করা
    localStorage.setItem('reduxState', serializedState); // LocalStorage-এ সেভ করা
  } catch (err) {
    console.error('Could not save state to LocalStorage', err);
  }
};

এখন, এই ফাংশনটিকে Redux Store এ middleware হিসেবে যুক্ত করতে হবে যাতে স্টেট পরিবর্তন হওয়ার পর এটি LocalStorage-এ সেভ হয়।

৪. Middleware তৈরি করা

Redux স্টোরের মধ্যে saveState ফাংশন ব্যবহার করতে subscribe পদ্ধতি ব্যবহার করা হবে। store.subscribe() ফাংশনটি স্টোরের স্টেট পরিবর্তন হলে রান হয়, এবং সেই সময় স্টেট LocalStorage-এ সেভ করা হবে।

store.subscribe(() => {
  saveState(store.getState()); // স্টেট পরিবর্তন হলে LocalStorage-এ সেভ করা
});

এই কোডটি স্টোরের পরিবর্তনের জন্য সাবস্ক্রাইব করবে এবং প্রতিবার স্টেট পরিবর্তন হলে saveState ফাংশনকে কল করবে, যাতে নতুন স্টেট LocalStorage-এ সেভ হয়ে যায়।

৫. সম্পূর্ণ কোড উদাহরণ

এখন পুরো কোডটি একত্রে দেখুন:

import { createStore } from 'redux';
import rootReducer from './reducers'; // আপনার রিডিউসার

// Redux স্টেট LocalStorage থেকে লোড করার জন্য helper ফাংশন
const loadState = () => {
  try {
    const serializedState = localStorage.getItem('reduxState');
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    console.error('Could not load state from LocalStorage', err);
    return undefined;
  }
};

// Redux স্টেট LocalStorage এ সেভ করার জন্য helper ফাংশন
const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('reduxState', serializedState);
  } catch (err) {
    console.error('Could not save state to LocalStorage', err);
  }
};

// LocalStorage থেকে স্টেট লোড করা
const persistedState = loadState();

// Redux স্টোর কনফিগার করা
const store = createStore(
  rootReducer,
  persistedState // লোড করা স্টেট
);

// স্টোরে পরিবর্তন হলে LocalStorage-এ সেভ করা
store.subscribe(() => {
  saveState(store.getState());
});

export default store;

এই কোডটি Redux স্টোর তৈরি করার সময়:

1. LocalStorage থেকে স্টেট লোড করবে।
2. স্টোরে কোনো পরিবর্তন হলে সেই পরিবর্তিত স্টেটকে LocalStorage-এ সেভ করবে।

সারাংশ

Redux স্টেট LocalStorage-এ সংরক্ষণ করা আপনাকে আপনার অ্যাপ্লিকেশনের স্টেট পার্সিস্ট করতে সহায়তা করে, যাতে পৃষ্ঠা রিফ্রেশের পরেও স্টেট অক্ষুণ্ণ থাকে। এটি অর্জন করতে, প্রথমে আপনাকে LocalStorage থেকে স্টেট লোড করতে হবে এবং তারপর Redux স্টোরে যেকোনো পরিবর্তন হলে সেই পরিবর্তিত স্টেটকে LocalStorage-এ সেভ করতে হবে। এভাবে, ব্যবহারকারীর ডেটা বা পছন্দগুলি দীর্ঘকাল ধরে সংরক্ষণ করা সম্ভব হয়।

Persist Gate এবং Rehydration Process হল Redux-এর উন্নত কনসেপ্ট যা অ্যাপ্লিকেশনের স্টেটকে সঞ্চয় বা সংরক্ষণ (persist) এবং পুনরুদ্ধার (rehydrate) করতে ব্যবহৃত হয়। যখন অ্যাপ্লিকেশন পুনরায় লোড হয়, তখন আগের স্টেট পুনরুদ্ধার করতে এবং আগের অবস্থায় ফিরে যেতে এই প্রক্রিয়া সহায়তা করে। এটি বিশেষত ইউজারের প্রিফারেন্স, লগইন তথ্য, বা অন্যান্য গুরুত্বপূর্ণ ডেটা স্টোর করে রাখতে কাজে আসে।

Persist Gate কী?

Persist Gate হল একটি কনসেপ্ট যা Redux-এ স্টেটের পাস persist করার জন্য ব্যবহৃত হয়, অর্থাৎ অ্যাপ্লিকেশনটি পুনরায় লোড বা রিফ্রেশ হওয়ার পরেও স্টেট আগের মতোই থাকবে। Redux Persist একটি পপুলার লাইব্রেরি যা এই কনসেপ্টটি বাস্তবায়ন করতে সহায়তা করে। Persist Gate হল সেই স্থান যেখানে এটি নিশ্চিত করা হয় যে, অ্যাপ্লিকেশনটি যখন পুনরায় রেন্ডার হবে, তখন স্টেট পুনরুদ্ধার হয়ে যাবে এবং ইউজার আগের অবস্থায় ফিরে যাবে।

Persist Gate মূলত একটি React কম্পোনেন্ট যা Redux Persist এর সঙ্গে কাজ করে, এবং এটি নিশ্চিত করে যে পুনরুদ্ধারের প্রক্রিয়া সফলভাবে সম্পন্ন হয়েছে।

Persist Gate কিভাবে কাজ করে?

1. Persist Gate অ্যাপ্লিকেশনের রেন্ডারিং শুরু হওয়ার আগে স্টোরের স্টেট পুনরুদ্ধার করে।
2. এটি rehydrate প্রক্রিয়া চলাকালীন সময়ে loading অবস্থায় থাকে, অর্থাৎ, স্টোরের ডেটা পুনরুদ্ধার না হওয়া পর্যন্ত অ্যাপ্লিকেশনকে সম্পূর্ণরূপে রেন্ডার করতে দেয় না।
3. একবার পুনরুদ্ধার সম্পন্ন হলে, অ্যাপ্লিকেশন রেন্ডার হয় এবং ইউজারের আগের স্টেট অনুযায়ী অ্যাপ্লিকেশন স্লাইডিং শুরু হয়।

Redux Persist এর মধ্যে PersistGate এক্সপোর্ট করা হয়, যেটি Redux Store এবং React অ্যাপ্লিকেশনকে একটি সিঙ্ক্রোনাইজড পরিবেশে সংযুক্ত করে।

Persist Gate এর উদাহরণ:

import React from 'react';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import { store, persistor } from './store';
import App from './App';

function Root() {
  return (
    <Provider store={store}>
      <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
}

export default Root;

এখানে:

• PersistGate একটি loading প্রপস নেয়, যা স্টেট পুনরুদ্ধারের সময় ইউজারের জন্য একটি লোডিং কম্পোনেন্ট প্রদর্শন করে। এটি পাস করা হয় Redux Persist দ্বারা যতক্ষণ না স্টেট পুরোপুরি পুনরুদ্ধার হয়।
• persistor হল একটি অবজেক্ট যা Redux Persist সেশনকে ম্যানেজ করে।

Rehydration Process কী?

Rehydration হল সেই প্রক্রিয়া যার মাধ্যমে Redux স্টোরে সংরক্ষিত স্টেট পুনরুদ্ধার করা হয়। যখন একটি অ্যাপ্লিকেশন পুনরায় লোড হয়, তখন স্টেট সাধারণত ব্রাউজারের লোকাল স্টোরেজ বা সেশন স্টোরেজ থেকে পুনরুদ্ধার করা হয়। এই প্রক্রিয়াটি rehydration নামে পরিচিত, এবং এটি নিশ্চিত করে যে ইউজারের ডেটা বা অন্যান্য কনফিগারেশন স্টেট রিফ্রেশ বা পেজ রিলোডের পরও অটোমেটিকভাবে পুনরুদ্ধার হয়ে যাবে।

Rehydration কিভাবে কাজ করে?

1. Persistor-এর মাধ্যমে স্টেটকে লোকাল স্টোরেজে সংরক্ষণ করা হয়।
2. যখন অ্যাপ্লিকেশন লোড হয়, Redux Persist স্বয়ংক্রিয়ভাবে সেই স্টেট পুনরুদ্ধার করতে চেষ্টা করে এবং সেটি Redux স্টোরে লোড করে দেয়।
3. একবার পুনরুদ্ধার প্রক্রিয়া সম্পন্ন হলে, ইউজার আগের স্টেটে ফিরে যেতে পারেন এবং অ্যাপ্লিকেশনটি তার গত অবস্থায় কাজ করতে থাকবে।

Rehydration Process এর উদাহরণ:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // স্থানীয় স্টোরেজ ব্যবহার করতে

const persistConfig = {
  key: 'root', // কী দিয়ে স্টেট সেভ হবে
  storage, // লোকাল স্টোরেজ বা সেশন স্টোরেজ
};

const rootReducer = (state = { todos: [] }, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state;
  }
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

এখানে:

• persistConfig: এটি একটি কনফিগারেশন অবজেক্ট, যেখানে স্টোরেজ পদ্ধতি (লোকাল স্টোরেজ বা সেশন স্টোরেজ) এবং স্টোরের key নির্ধারণ করা হয়।
• persistedReducer: এটি মূল রিডিউসার যা persistReducer দ্বারা প্যাক করা হয় যাতে স্টেটকে সেভ এবং পুনরুদ্ধার করা যায়।
• persistStore(store): এটি স্টোরের জন্য একটি persistor অবজেক্ট তৈরি করে, যা স্টেটকে পুনরুদ্ধার করে।

Persist Gate এবং Rehydration Process এর সুবিধা

1. স্টেট সঞ্চয় (Persistence): অ্যাপ্লিকেশন বন্ধ বা রিফ্রেশ হওয়ার পরেও ইউজারের ডেটা ও প্রেফারেন্সগুলো সেভ থাকে।
2. ইউজার এক্সপেরিয়েন্স: ইউজার যখন অ্যাপ্লিকেশন ফের লোড করেন, তখন তারা আগের অবস্থায় ফিরে যেতে পারে, যা একটি ধারাবাহিক অভিজ্ঞতা প্রদান করে।
3. অ্যাসিনক্রোনাস ডেটা লোডিং: পুনরুদ্ধারের সময় অ্যাপ্লিকেশন বা UI লোড হতে থাকে, যাতে ইউজারের জন্য একটি স্লো রিডিং অভিজ্ঞতা না হয়।
4. অফলাইন সাপোর্ট: ইউজার যখন অফলাইনে থাকে, তখন তাদের ডেটা লোকাল স্টোরেজে সেভ হয়ে থাকে এবং তারা পরবর্তী সময়ে ইন্টারনেট কানেকশন পুনরুদ্ধার করলে তা পুনরুদ্ধার করতে সক্ষম হয়।

সারাংশ

Persist Gate এবং Rehydration Process Redux-এ স্টেটের ধারাবাহিকতা এবং সঞ্চয় (persistence) নিশ্চিত করে। Persist Gate স্টেট পুনরুদ্ধারের জন্য একটি গেট হিসেবে কাজ করে এবং পুনরুদ্ধারের সময় লোডিং স্ক্রিন দেখাতে পারে, যখন Rehydration Process সেই পুনরুদ্ধারের মূল প্রক্রিয়া, যা আগের স্টেট পুনরুদ্ধার করে। Redux Persist লাইব্রেরি এই প্রক্রিয়া সহজ করে তোলে, এবং এটি বিশেষত অ্যাসিনক্রোনাস ডেটা বা ইউজার প্রিফারেন্স স্টোর করার ক্ষেত্রে কার্যকর।

Redux Persist একটি জনপ্রিয় লাইব্রেরি যা আপনাকে Redux স্টোরের ডেটা স্থানীয়ভাবে (যেমন ব্রাউজারের LocalStorage বা SessionStorage) সংরক্ষণ করতে সাহায্য করে। এর মাধ্যমে, যখন ইউজার ব্রাউজার রিফ্রেশ বা পুনরায় লোড করেন, তখন তাদের স্টোরের ডেটা বজায় থাকে। এটি বিশেষত Session Management এর ক্ষেত্রে উপকারী, যেখানে ইউজারের সেশন ডেটা দীর্ঘ সময় ধরে সংরক্ষণ করা প্রয়োজন।

Redux Persist কী?

Redux Persist হল একটি সেবা যা Redux স্টোরের ডেটা প্যারসিস্ট করতে সাহায্য করে। এটি স্বয়ংক্রিয়ভাবে স্টোরের ডেটাকে localStorage, sessionStorage বা অন্যান্য স্টোরেজ এপিআই-তে সংরক্ষণ করে, যাতে স্টোরের ডেটা ব্রাউজার রিফ্রেশ বা অ্যাপ্লিকেশন পুনরায় লোড হওয়ার পরও অব্যাহত থাকে।

Session Management কী?

Session Management হল ইউজারের লগইন, প্রোফাইল ডেটা, এবং অন্যান্য সেশন সম্পর্কিত তথ্য সংরক্ষণের প্রক্রিয়া। সাধারণত, এই তথ্য ব্রাউজারের SessionStorage এ সংরক্ষণ করা হয়, যা শুধুমাত্র বর্তমান ব্রাউজার সেশনের জন্য বৈধ থাকে (ব্রাউজার বন্ধ হলে এটি মুছে যায়)।

Redux Persist ব্যবহার করে Session Management

Redux Persist ব্যবহার করে আপনি Redux স্টোরের ডেটা SessionStorage বা LocalStorage-এ সংরক্ষণ করতে পারেন। এটি ইউজারের সেশন ডেটা দীর্ঘ সময় ধরে সঞ্চিত রাখে এবং রিফ্রেশের পরেও স্টেট রিস্টোর করে।

Redux Persist ইন্সটল করা

Redux Persist ব্যবহার করতে প্রথমে এটি ইন্সটল করতে হবে:

npm install redux-persist

Redux Persist কনফিগারেশন

ধরা যাক, আপনি একটি সিম্পল অ্যাপ্লিকেশন তৈরি করেছেন যেখানে ইউজারের লগইন ডেটা এবং টোকেন স্টোর করা হয়। Redux Persist ব্যবহার করে আমরা এই ডেটাগুলি SessionStorage-এ সংরক্ষণ করতে পারি।

১. Redux Persist কনফিগারেশন

প্রথমে, আমরা Redux Persist কনফিগারেশন তৈরি করব:

import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage/session'; // Use sessionStorage
import rootReducer from './reducers';

// Persist config
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user'], // Only persist the 'user' slice of state
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
});

const persistor = persistStore(store);

export { store, persistor };

এখানে:

• storage: redux-persist/lib/storage/session ব্যবহার করে সেশন স্টোরেজে ডেটা সংরক্ষণ করা হচ্ছে।
• persistReducer: এটি Redux স্টোরের রিডিউসারকে স্টোরেজে সংরক্ষণযোগ্য করে তোলে।
• whitelist: এখানে আমরা শুধু user slice-টিকে persist করার জন্য বেছে নিয়েছি, যাতে অন্য স্টেট অংশ গুলো persist না হয়।

২. RootReducer তৈরি করা

import { combineReducers } from 'redux';

const userReducer = (state = { loggedIn: false, token: null }, action) => {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, loggedIn: true, token: action.payload };
    case 'LOGOUT':
      return { ...state, loggedIn: false, token: null };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  user: userReducer,
});

export default rootReducer;

এখানে, userReducer ইউজারের লগইন স্টেট এবং টোকেন ম্যানেজ করে, যেটি আমরা Persist করতে চাই।

৩. React কম্পোনেন্টে Store এবং Persistor যুক্ত করা

এখন, আমাদের store এবং persistor কে React অ্যাপ্লিকেশনে যুক্ত করতে হবে।

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';

function Root() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
}

export default Root;

এখানে, PersistGate ব্যবহার করা হয়েছে যা loading প্রপার্টি দিয়ে দেখায় যে সেশন ডেটা রিস্টোর হওয়ার প্রক্রিয়া চলছে, এবং পরে অ্যাপ্লিকেশন রেন্ডার হয়।

Session Management এর মাধ্যমে User Authentication

ধরা যাক, আপনি ইউজারের লগইন ডেটা স্টোর করতে চান যাতে তারা ব্রাউজার রিফ্রেশ বা সেশন রিস্টার্টের পরও লগইন অবস্থায় থাকেন। Redux Persist এর মাধ্যমে এটি সহজেই করা সম্ভব।

১. Action Creator

const login = (token) => ({
  type: 'LOGIN',
  payload: token,
});

const logout = () => ({
  type: 'LOGOUT',
});

২. React কম্পোনেন্টে লগইন এবং লগআউট

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { login, logout } from './actions';

function App() {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user);

  const handleLogin = () => {
    // Example token for demo
    dispatch(login('user_token_12345'));
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      <h1>Redux Persist Session Management</h1>
      {user.loggedIn ? (
        <div>
          <p>Welcome, User! Token: {user.token}</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

export default App;

এখানে:

• ইউজার যদি লগইন থাকে, তাদের টোকেন sessionStorage-এ সংরক্ষিত থাকে এবং সেশন রিফ্রেশের পরেও তা রিস্টোর করা যায়।
• লগআউট হলে টোকেনটি মুছে ফেলা হয় এবং স্টেটও আপডেট হয়।

Redux Persist এর মাধ্যমে Session Expiry বা Timeout হ্যান্ডলিং

যদি আপনার সেশন কিছু সময় পর স্বয়ংক্রিয়ভাবে শেষ করতে চান, তাহলে আপনি sessionStorage ব্যবহার করে একটি টাইমার সেট করতে পারেন, যাতে একটি নির্দিষ্ট সময় পর সেশন ডেটা মুছে যায়।

useEffect(() => {
  const timeout = setTimeout(() => {
    dispatch(logout());
  }, 3600000); // 1 hour timeout

  return () => clearTimeout(timeout);
}, [dispatch]);

এখানে, 1 ঘণ্টা পর সেশন ডেটা স্বয়ংক্রিয়ভাবে মুছে যাবে এবং ইউজারকে লগআউট করা হবে।

সারাংশ

Redux Persist এবং Session Management ব্যবহার করে আপনি Redux স্টোরের ডেটা sessionStorage বা localStorage-এ সংরক্ষণ করতে পারেন, যা ব্রাউজার রিফ্রেশ বা সেশন রিস্টার্টের পরও ইউজারের ডেটা বজায় রাখে। Redux Persist এর মাধ্যমে আপনি স্টেট প্যারসিস্ট করতে পারেন এবং Redux-এর ডেটা সিঙ্ক্রোনাইজেশনের সুবিধা নিতে পারেন। Redux Persist সহ Session Management ব্যবহারের মাধ্যমে আপনি ইউজারের লগইন স্টেট, প্রোফাইল ডেটা এবং অন্যান্য সেশন ইনফরমেশন সংরক্ষণ করতে পারবেন, যা অ্যাপ্লিকেশন ব্যবহারের অভিজ্ঞতাকে উন্নত করে।