Web Development Reselect Library এবং Memoized Selectors গাইড ও নোট

Reselect হল একটি জনপ্রিয় লাইব্রেরি যা Redux-এ selectors ব্যবহারের জন্য memoization প্রদান করে। Redux স্টোর থেকে ডেটা নির্বাচন করার জন্য selectors ব্যবহার করা হয়। তবে, যখন একাধিক selector একই ডেটা নির্বাচন করে, তখন unnecessary recalculations বা পুনরায় গণনা হতে পারে, যা পারফরম্যান্স কমিয়ে দিতে পারে। এখানে Reselect লাইব্রেরি কাজ আসে, যা memoization প্রযুক্তি ব্যবহার করে একই ইনপুটে পুনরায় গণনা হওয়ার প্রয়োজনীয়তা কমিয়ে দেয়।

Reselect Library কী?

Reselect হলো একটি লাইব্রেরি যা Redux selectors এর জন্য memoization ফিচার প্রদান করে। এটি নির্দিষ্ট input state থেকে derived data (অথবা calculated data) নির্বাচন করার জন্য ব্যবহৃত হয়, এবং একই input data এর জন্য পুনরায় নির্বাচনের ফলাফল ক্যাশ করে রাখে, যাতে পুনরায় গণনা না করতে হয়। এর ফলে স্টেট নির্বাচনের পারফরম্যান্স বৃদ্ধি পায়।

Memoization হল একটি প্রযুক্তি যেখানে একটি ফাংশন একই ইনপুট দিয়ে বার বার কল হলে, প্রথমে যা রিটার্ন হয় তা সংরক্ষণ করা হয় এবং পরবর্তী সময়ে একই ইনপুটের জন্য পূর্বে রিটার্ন করা ফলাফল সরাসরি রিটার্ন করা হয়।

Reselect এর প্রধান সুবিধা

1. Memoization: Reselect প্রতিটি selector এর জন্য memoization ব্যবহার করে, যাতে পূর্ববর্তী ফলাফল পুনরায় ব্যবহার করা যায় যদি ইনপুট পরিবর্তন না ঘটে।
2. Performance Improvement: Redux স্টোর থেকে ডেটা নির্বাচনের সময়ে unnecessary recalculations কমিয়ে দেয়, যা পারফরম্যান্স উন্নত করে।
3. Complex Derived Data: বিভিন্ন selector একত্রিত করে derived data বা complex calculations তৈরি করা সহজ হয়।
4. Composable: Reselect selectors একে অপরের সাথে একত্রিত হতে পারে, যাতে আপনি চেইন করে অনেক selectors ব্যবহার করতে পারেন।

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

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

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

   npm install reselect
   

2. Basic Selector তৈরি করা:

   Reselect লাইব্রেরি দিয়ে সাধারণ selector তৈরি করতে createSelector ফাংশন ব্যবহার করা হয়। এই ফাংশনটি selector ফাংশন তৈরি করে, যা memoized রেজাল্ট প্রদান করে।

উদাহরণ:

import { createSelector } from 'reselect';

// ইনপুট সিলেক্টর
const getTodos = (state) => state.todos;
const getFilter = (state) => state.filter;

// memoized সিলেক্টর
const getVisibleTodos = createSelector(
  [getTodos, getFilter], // ইনপুট সিলেক্টর
  (todos, filter) => {
    // ডেটা ক্যালকুলেশন বা derived data
    return todos.filter(todo => todo.status === filter);
  }
);

export default getVisibleTodos;

এখানে:

• getTodos: Redux স্টোর থেকে todos সিলেক্ট করা।
• getFilter: স্টোর থেকে filter সিলেক্ট করা।
• createSelector: এটি একটি memoized selector তৈরি করে, যা কেবলমাত্র যদি todos বা filter পরিবর্তিত হয় তবেই নতুন ফলাফল রিটার্ন করবে।

Reselect এর মাধ্যমে Memoized Selectors ব্যবহার করা

যখন একই state থেকে বার বার সিলেক্টর ব্যবহার করতে হয়, Reselect সেই ফলাফলকে ক্যাশ করে রাখে, যাতে একে বার বার পুনরায় গণনা না করতে হয়। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন স্টোরে বড় ডেটা থাকে বা যদি ডেটার উপর জটিল ক্যালকুলেশন করতে হয়।

উদাহরণ:

ধরা যাক, আমাদের স্টোরে অনেক বড় একটি todos অ্যারে আছে, এবং আমরা শুধুমাত্র কিছু নির্দিষ্ট status (যেমন: 'completed' বা 'pending') ভিত্তিক ডেটা সিলেক্ট করতে চাই।

import { createSelector } from 'reselect';

const getTodos = (state) => state.todos;
const getStatusFilter = (state) => state.statusFilter;

// সিলেক্টর তৈরি করা যা memoization করে
const getFilteredTodos = createSelector(
  [getTodos, getStatusFilter],
  (todos, statusFilter) => {
    console.log("Re-calculating filtered todos");
    return todos.filter(todo => todo.status === statusFilter);
  }
);

export default getFilteredTodos;

এখানে:

• getFilteredTodos: এই সিলেক্টরটি todos এবং statusFilter ফিল্টার করে শুধুমাত্র সেই todos রিটার্ন করবে যেগুলির স্ট্যাটাস statusFilter এর সাথে মেলে।
• Memoization: প্রথমবার যখন getFilteredTodos কল করা হয়, এটি ফিল্টার্ড todos রিটার্ন করবে। কিন্তু পরবর্তীতে যদি todos বা statusFilter পরিবর্তন না হয়, তবে এটি আগের ফলাফলই রিটার্ন করবে এবং "Re-calculating filtered todos" লগটি দেখাবে না।

Composing Multiple Selectors

Reselect ব্যবহার করে একাধিক সিলেক্টর একত্রিত করা সম্ভব। আপনি একাধিক selectors ব্যবহার করে একটি নতুন derived selector তৈরি করতে পারেন।

import { createSelector } from 'reselect';

// ইনপুট সিলেক্টর
const getTodos = (state) => state.todos;
const getFilter = (state) => state.filter;
const getSortOrder = (state) => state.sortOrder;

// নতুন সিলেক্টর তৈরি করা
const getSortedVisibleTodos = createSelector(
  [getTodos, getFilter, getSortOrder],
  (todos, filter, sortOrder) => {
    let filteredTodos = todos.filter(todo => todo.status === filter);
    
    if (sortOrder === 'asc') {
      filteredTodos.sort((a, b) => a.title.localeCompare(b.title));
    } else {
      filteredTodos.sort((a, b) => b.title.localeCompare(a.title));
    }

    return filteredTodos;
  }
);

এখানে:

• getSortedVisibleTodos: এটি getTodos, getFilter, এবং getSortOrder সিলেক্টরকে একত্রিত করে একটি নতুন সিলেক্টর তৈরি করছে, যা শুধু ফিল্টারড এবং সোর্টেড todos রিটার্ন করবে।

Reselect এর Performance Optimization

• Memoization: createSelector ফাংশন দিয়ে তৈরি সিলেক্টরগুলি পুরনো ইনপুটের জন্য পূর্বের রিটার্ন মান ব্যবহার করে, যা unnecessary recalculation রোধ করে।
• Fine-grained recalculations: যখনই কোনো স্টেট পরিবর্তন হয়, Reselect শুধুমাত্র পরিবর্তিত ইনপুটের জন্য পুনরায় গণনা করে, অন্য ইনপুট অপরিবর্তিত থাকলে আগের ফলাফলই ব্যবহার করা হয়।

সারাংশ

Reselect লাইব্রেরি Redux অ্যাপ্লিকেশনগুলিতে selectors ব্যবহারের জন্য একটি শক্তিশালী এবং পারফরম্যান্স-বান্ধব সমাধান। এটি memoization ব্যবহার করে, যা unnecessary recalculations কমিয়ে দেয় এবং Redux স্টোর থেকে ডেটা নির্বাচন করার পারফরম্যান্স উন্নত করে। Reselect ব্যবহার করে, আপনি Redux স্টোরের ডেটা থেকে derived data বা complex calculations খুব সহজে নির্বাচন করতে পারেন, এবং একাধিক সিলেক্টরকে একত্রিত করে আরও উন্নত ও পারফরম্যান্স-ভিত্তিক ডেটা ম্যানিপুলেশন করতে পারেন।