Web Development Redux Persist এর সাথে Session Management গাইড ও নোট

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 ব্যবহারের মাধ্যমে আপনি ইউজারের লগইন স্টেট, প্রোফাইল ডেটা এবং অন্যান্য সেশন ইনফরমেশন সংরক্ষণ করতে পারবেন, যা অ্যাপ্লিকেশন ব্যবহারের অভিজ্ঞতাকে উন্নত করে।