স্টেট ম্যানেজমেন্টে selectors এবং memoization কী?

Question

Accepted Answer

একটি **selector** হল একটি ফাংশন যা **স্টেট থেকে ডেটার একটি নির্দিষ্ট অংশ পড়ে (ডেরাইভ করে)**। **Memoization** একটি selector এর ফলাফল ক্যাশ করে যাতে এটি শুধুমাত্র তার ইনপুট পরিবর্তিত হলে পুনরায় গণনা করে — এটি গুরুত্বপূর্ণ কর্মক্ষমতার জন্য যখন selectors ব্যয়বহুল কাজ করে বা অপ্রয়োজনীয় re-renders এড়াতে।

## মৌলিক selectors — স্টেট অ্যাক্সেস এনক্যাপসুলেট করুন

```js
// a selector knows HOW to pull a value out of the state shape
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

Selectors স্টেট স্ট্রাকচার সম্পর্কে জ্ঞান কেন্দ্রীভূত করে — কম্পোনেন্টগুলি `selectCartTotal(state)` অনুরোধ করে এটি না জেনে কোথায়/কীভাবে সংরক্ষিত আছে, তাই যদি স্টেট শেপ পরিবর্তন হয় তখন আপনি একটি selector আপডেট করেন, প্রতিটি কম্পোনেন্ট নয়।

## সমস্যা: ডেরাইভড selectors প্রতিটি কলে পুনরায় গণনা করে

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
```

একটি selector যা একটি নতুন অ্যারে/অবজেক্ট তৈরি করে প্রতিটি কলে একটি **নতুন রেফারেন্স** ফেরত দেয় — যা অপ্রয়োজনীয় re-renders ট্রিগার করতে পারে (React একটি "নতুন" মান দেখে) এবং গণনা নষ্ট করে।

## সমাধান: memoized selectors (Reselect)

```js
import { createSelector } from "reselect"; // or RTK's createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // input selector(s)
  (items) => items.filter(i => i.active).sort(compareFn) // recompute ONLY if items changed
);
```

`createSelector` ফলাফল ক্যাশ করে এবং শুধুমাত্র ব্যয়বহুল গণনা পুনরায় চালায় যখন এর ইনপুট (`state.items`) প্রকৃতপক্ষে পরিবর্তিত হয় — অন্যথায় এটি **একই রেফারেন্স** ফেরত দেয়, উভয় পুনর্গণনা এবং ডাউনস্ট্রীম re-renders প্রতিরোধ করে।

## Selectors সংযোজন করা

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // build on other selectors
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

Selectors সংযুক্ত হয়, সাধারণ, স্বতন্ত্রভাবে-ক্যাশড অংশ থেকে জটিল ডেরিভেশন তৈরি করে।

## এটি কেন গুরুত্বপূর্ণ

Selectors কম্পোনেন্টগুলিকে স্টেট এর শেপ থেকে বিচ্ছিন্ন করে (একটি রক্ষণাবেক্ষণ জয়) এবং ডেরাইভড ডেটা প্রকাশ করার জন্য একটি স্থান প্রদান করে।

Memoization ডেরাইভড selectors দক্ষ করে তোলে — পুনরাবৃত্ত ব্যয়বহুল গণনা এড়িয়ে এবং গুরুত্বপূর্ণভাবে, স্থিতিশীল রেফারেন্স ফেরত দেয় যাতে সংযুক্ত কম্পোনেন্টগুলি অপ্রয়োজনে re-render না করে।

Redux/NgRx অ্যাপগুলিতে, memoized selectors (Reselect/`createSelector`) একটি মূল কর্মক্ষমতা এবং আর্কিটেকচার সরঞ্জাম; একই ক্যাশিং ধারণা `useMemo` এবং `computed` হিসাবে অন্যত্র প্রদর্শিত হয়।