રાજ્ય વ્યવસ્થાપનમાં સિલેક્ટર્સ અને મેમોઇઝેશન શું છે?

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` અન્યત્ર પણ દેખાય છે.