Cilat janë selektorët dhe memoizimi në menaxhimin e gjendjes?

Question

Accepted Answer

Një **selektor** është një funksion që **lexon (nxjerr) një pjesë specifike të të dhënave nga gjendja**. **Memorizimi** ruaj në cache rezultatin e selektorit në mënyrë që të rillogaritet vetëm kur hyrjet ndryshojnë — e rëndësishme për performancën kur selektorët bëjnë punë të shtrenjtë ose për të shmangur pasja e panevojshme.

## Selektorët bazë — enkapsuloni qasjen në gjendje

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

Selektorët përqendrojnë njohuritë për strukturën e gjendjes — komponentët pyesin `selectCartTotal(state)` pa ditur ku/si ruhet, kështu që nëse forma e gjendjes ndryshon, azhurnoni një selektor, jo çdo komponent.

## Problemi: selektorët e nxjerrur rillogariten në secilin thirrje

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

Një selektor që krijon një varg/objekt të ri kthen një **referencë të re** në secilin thirrje — e cila mund të aktivizojë pasja të panevojshme (React sheh një vlerë "të re") dhe shperdor llogaritjen.

## Zgjidhja: selektorët e memorizuar (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` ruaj në cache rezultatin dhe vetëm ri-ekzekuton llogaritjen e shtrenjtë kur hyrjet e tij (`state.items`) në të vërtetë ndryshojnë — përndryshe kthen të njëjtën **referencë**, duke parandaluar si rillogaritjen ashtu edhe pasja të panevojshme në rrjedhën poshtë.

## Përbërja e selektorëve

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

Selektorët përbëhen, duke ndërtuar derivacionet komplekse nga pjesë të thjeshta, të memorizuara individualisht.

## Pse është e rëndësishme

Selektorët ndajnë komponentët nga forma e gjendjes (fitim në mirëmbajtje) dhe ofrojnë një vend për të shprehur të dhënat e nxjerrura.

Memorizimi e bën selektorët e nxjerrur efikasë — duke shmangur llogaritjen e shtrenjtë të përsëritur dhe, në mënyrë vendimtare, duke kthyer referenca të qëndrueshme në mënyrë që komponentët e lidhur nuk pasja panevojshme.

Në aplikacionet Redux/NgRx, selektorët e memorizuar (Reselect/`createSelector`) janë një mjet kyç për performancën dhe arkitekturën; e njëjta idejë e ruajtjes në cache shfaqet si `useMemo` dhe `computed` diku tjetër.