Kaj so selektorji in memoizacija v upravljanju stanja?

Question

Accepted Answer

**Selektor** je funkcija, ki **prebere (izpelje) določen del podatkov iz stanja**. **Memoizacija** predpomnijo rezultat selektorja, zato se ponovno izračuna samo, ko se vhodi spremenijo — to je pomembno za zmogljivost, ko selektorji opravljajo drago delo ali da se izognemo nepotrebnim ponovnim prikazom.

## Osnovni selektorji — enkapsulirajte dostop do stanja

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

Selektorji centralizirajo znanje o strukturi stanja — komponente sprašujejo `selectCartTotal(state)` brez vedenja, kje/kako je shranjeno, zato če se oblika stanja spremeni, posodobite en selektor, ne pa vsake komponente.

## Problem: izpeljani selektorji se ponovno izračunajo ob vsakem klicu

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

Selektor, ki ustvari novo polje/objekt, vrne **novo referenco** ob vsakem klicu — kar lahko spravi v gibanje nepotrebne ponovne prikaze (React vidi »novo« vrednost) in zapravi izračun.

## Rešitev: memoizirani selektorji (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` predpomnijo rezultat in samo ponovno zažene drago izračun, ko se njegovi vhodi (`state.items`) resnično spremenijo — sicer vrne **isto referenco**, kar prepreči tako ponovno izračun kot tudi nepotrebne ponovne prikaze navzdol.

## Sestavljanje selektorjev

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

Selektorji se sestavljajo in gradijo kompleksne izpeljave iz enostavnih, posamično shranjenih kosov.

## Zakaj je to pomembno

Selektorji ločijo komponente od oblike stanja (zmaga za vzdrževljivost) in zagotavljajo eno mesto za izražanje izpeljanih podatkov.

Memoizacija naredi izpeljane selektorje učinkovite — preprečuje ponavljajočo se drago izračun in, kar je ključno, vrača stabilne reference, zato se povezane komponente nepotrebno ne prikažejo.

V Redux/NgRx aplikacijah so memoizirani selektorji (Reselect/`createSelector`) ključno orodje za zmogljivost in arhitekturo; ista ideja hranjenja se pojavi kot `useMemo` in `computed` drugje.