अवस्था प्रबंधन में चयनकर्ता और मेमोइजेशन क्या हैं?

Question

Accepted Answer

एक **चयनकर्ता** एक फ़ंक्शन है जो **अवस्था से एक विशिष्ट डेटा को पढ़ता (व्युत्पन्न करता) है**। **मेमोइजेशन** चयनकर्ता के परिणाम को कैश करता है ताकि यह केवल तभी पुनर्गणना करे जब इसके इनपुट बदलें — जब चयनकर्ता महंगा कार्य करें या अनावश्यक पुनः-प्रस्तुति से बचने के लिए प्रदर्शन के लिए महत्वपूर्ण है।

## मूल चयनकर्ता — अवस्था पहुँच को समावेश करें

```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
```

चयनकर्ता अवस्था की संरचना के बारे में ज्ञान को केंद्रीभूत करते हैं — घटक `selectCartTotal(state)` के लिए अनुरोध करते हैं यह जाने बिना कि यह कहाँ/कैसे संग्रहित है, इसलिए यदि अवस्था का आकार बदलता है तो आप एक चयनकर्ता को अपडेट करते हैं, सभी घटकों को नहीं।

## समस्या: व्युत्पन्न चयनकर्ता प्रत्येक कॉल पर पुनर्गणना करते हैं

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

एक चयनकर्ता जो एक नई सरणी/वस्तु बनाता है प्रत्येक कॉल पर एक **नया संदर्भ** लौटाता है — जो अनावश्यक पुनः-प्रस्तुति (React एक "नया" मान देखता है) और व्यर्थ गणना को ट्रिगर कर सकता है।

## समाधान: मेमोइज्ड चयनकर्ता (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`) वास्तव में बदलें — अन्यथा यह **समान संदर्भ** लौटाता है, दोनों पुनर्गणना और डाउनस्ट्रीम पुनः-प्रस्तुति को रोकता है।

## चयनकर्ता को संयोजित करना

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

चयनकर्ता संयोजन, सरल, व्यक्तिगत रूप से कैश किए गए टुकड़ों से जटिल व्युत्पत्तियों का निर्माण करते हैं।

## यह महत्वपूर्ण क्यों है

चयनकर्ता घटकों को अवस्था के आकार से अलग करते हैं (एक रखरखाव जीत) और व्युत्पन्न डेटा व्यक्त करने के लिए एक स्थान प्रदान करते हैं।

मेमोइजेशन व्युत्पन्न चयनकर्ता को कुशल बनाता है — दोहराए गए महंगे गणना से बचता है और महत्वपूर्ण रूप से, स्थिर संदर्भ लौटाता है ताकि जुड़े हुए घटक अनावश्यक रूप से पुनः-प्रस्तुत न हों।

Redux/NgRx ऐप्स में, मेमोइज्ड चयनकर्ता (Reselect/`createSelector`) एक प्रमुख प्रदर्शन और आर्किटेक्चर उपकरण है; एक ही कैशिंग विचार अन्यत्र `useMemo` और `computed` के रूप में प्रकट होता है।