Redux State LocalStorage এ সংরক্ষণ করা

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-এ সেভ করতে হবে। এভাবে, ব্যবহারকারীর ডেটা বা পছন্দগুলি দীর্ঘকাল ধরে সংরক্ষণ করা সম্ভব হয়।