Što su selektori i memoizacija u upravljanju stanjem?

Question

Accepted Answer

**Selektor** je funkcija koja **čita (izvlači) specifičan podatak iz stanja**. **Memoizacija** cachea rezultat selektora tako da se ponovno izračunava samo kada se njegovi ulazi promijene — važno za performanse kada selektori rade skupo ili kako bi se izbjegli nepotrebni re-renderi.

## Osnovni selektori — enkapsulacija pristupa stanju

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

Selektori centraliziraju znanje o strukturi stanja — komponente traže `selectCartTotal(state)` bez znanja gdje/kako je pohranjena, tako da ako se oblik stanja promijeni, ažurirate jedan selektor, ne svaku komponentu.

## Problem: izvedeni selektori se ponovno izračunavaju pri svakom pozivu

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

Selektor koji kreira novi niz/objekt vraća **novu referencu** pri svakom pozivu — što može pokrenuti nepotrebne re-rendere (React vidi "novu" vrijednost) i troši računanje.

## Rješenje: memorizirani selektori (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` cachea rezultat i ponovno pokreće skupo računanje samo kada se njegovi ulazi (`state.items`) zaista promijene — inače vraća **istu referencu**, sprječavajući i ponovno izračunavanje i downstream re-rendere.

## Sastavljanje selektora

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

Selektori se sastavljaju, grade kompleksne izvedenice od jednostavnih, pojedinačno cacheiranih dijelova.

## Zašto je važno

Selektori odvajaju komponente od oblika stanja (pobjena u održavanju) i pružaju jedno mjesto za izražavanje izvedenih podataka.

Memoizacija čini izvedene selektore učinkovitima — izbjegavajući ponovljeno skupo izračunavanje i, ključno, vraćajući stabilne reference tako da povezane komponente ne re-rendiraju nepotrebno.

U Redux/NgRx aplikacijama, memorizirani selektori (Reselect/`createSelector`) su ključan alat za performanse i arhitekturu; ista ideja cachiranja pojavljuje se kao `useMemo` i `computed` na drugim mjestima.