स्टेट म्यानेजमेन्टमा 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 ले स्टेट संरचनाको ज्ञान केन्द्रीकृत गर्छन् — components ले `selectCartTotal(state)` सोध्छन् बिना यो कहाँ/कसरी भण्डार गरिएको छ भनी जान्दै, त्यसैले यदि स्टेट आकार परिवर्तन हुन्छ भने तपाईंले एक selector अपडेट गर्नुहुन्छ, सबै components नभई।

## समस्या: व्युत्पन्न selectors हरेक कल गर्दा पुनः गणना हुन्छन्

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

एक selector जसले नयाँ array/object सिर्जना गर्छ हरेक कल **नयाँ सन्दर्भ** फिर्ता गर्छ — जसले अनावश्यक 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 ले components को स्टेटको आकारबाट अलग गर्छ (एक रखरखावको जीत) र व्युत्पन्न डेटा व्यक्त गर्न एक स्थान प्रदान गर्छ।

Memoization ले व्युत्पन्न selectors लाई कुशल बनाउछ — दोहोरिएको महँगो गणना बचाउँदै र, महत्त्वपूर्ण रूपमा, स्थिर सन्दर्भ फिर्ता गर्दै ताकि जोडिएको components अनावश्यकरूपमा पुनः रेन्डर नहुन्।

Redux/NgRx एप्लिकेशनहरूमा, memoized selectors (Reselect/`createSelector`) एक मुख्य कार्यसम्पादन र आर्किटेक्चर उपकरण हुन्; एक समान क्यासिङ विचार `useMemo` र `computed` अन्यत्र देखा पर्छ।