Co jsou selektory a memoization v řízení stavu?

Question

Accepted Answer

**Selektor** je funkce, která **čte (odvozuje) konkrétní část dat ze stavu**. **Memoization** ukládá do mezipaměti výsledek selektoru, takže se přepočítá pouze když se změní jeho vstupy — je důležité pro výkon, když selektory provádějí nákladné operace nebo aby se zabránilo zbytečným re-renders.

## Základní selektory — zapouzdřete přístup ke stavu

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

Selektory centralizují znalosti o struktuře stavu — komponenty si vyžadují `selectCartTotal(state)` bez znalosti, kde/jak je uložen, takže pokud se tvar stavu změní, aktualizujete jeden selektor, ne každou komponentu.

## Problém: odvozené selektory se přepočítávají při každém volání

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

Selektor, který vytváří nové pole/objekt, vrací při každém volání **nový odkaz** — což může spustit zbytečné re-renders (React vidí "novou" hodnotu) a plýtvá výpočtem.

## Řešení: memoizované selektory (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` ukládá výsledek do mezipaměti a spustí nákladný výpočet pouze znovu, když se jeho vstupy (`state.items`) skutečně změní — jinak vrátí **stejný odkaz**, čímž se zabrání přepočítání i následným re-renders.

## Skládání selektorů

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

Selektory se kombinují, vyvozují komplexní derivace z jednoduchých, jednotlivě ukládaných do mezipaměti částí.

## Proč to záleží

Selektory oddělují komponenty od tvaru stavu (výhra pro udržovatelnost) a poskytují jedno místo pro vyjádření odvozených dat.

Memoization dělá odvozené selektory efektivní — zabraňuje opakovanému nákladnému výpočtu a zásadně vrací stabilní odkazy, aby se připojené komponenty zbytečně nerendery.

V aplikacích Redux/NgRx jsou memoizované selektory (Reselect/`createSelector`) klíčovým nástrojem výkonu a architektury; stejná myšlenka ukládání do mezipaměti se objevuje jako `useMemo` a `computed` jinde.