Was sind Selektoren und Memoization im State Management?

Question

Accepted Answer

Ein **Selector** ist eine Funktion, die **eine bestimmte Datenmenge aus dem State liest (ableitet)**. **Memoization** speichert das Ergebnis eines Selectors zwischen, sodass es nur neu berechnet wird, wenn sich seine Eingaben ändern — wichtig für die Leistung, wenn Selectors teure Operationen durchführen oder um unnötige Re-Renders zu vermeiden.

## Grundlegende Selectors — State-Zugriff kapseln

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

Selectors zentralisieren das Wissen über die State-Struktur — Komponenten fordern `selectCartTotal(state)` an, ohne zu wissen, wo/wie es gespeichert ist. Wenn sich die State-Form ändert, aktualisieren Sie also einen Selector, nicht jede Komponente.

## Das Problem: abgeleitete Selectors werden bei jedem Aufruf neu berechnet

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

Ein Selector, der ein neues Array/Objekt erstellt, gibt bei jedem Aufruf eine **neue Referenz** zurück — was unnötige Re-Renders auslösen kann (React sieht einen "neuen" Wert) und Berechnungen verschwendet.

## Die Lösung: memoized Selectors (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` speichert das Ergebnis zwischenund führt die teure Berechnung nur dann neu aus, wenn sich seine Eingaben (`state.items`) tatsächlich ändern — andernfalls wird **dieselbe Referenz** zurückgegeben, was sowohl Neuberechnungen als auch nachgelagerte Re-Renders verhindert.

## Selectors kombinieren

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

Selectors werden kombiniert und erstellen komplexe Ableitungen aus einfachen, individuell zwischengespeicherten Teilen.

## Warum es wichtig ist

Selectors entkoppeln Komponenten von der State-Form (ein Gewinn für die Wartbarkeit) und bieten einen Ort, um abgeleitete Daten auszudrücken.

Memoization macht abgeleitete Selectors effizient — vermeidet wiederholte teure Berechnungen und gibt entscheidend stabile Referenzen zurück, sodass verbundene Komponenten nicht unnötig erneut gerendert werden.

In Redux/NgRx-Apps sind memoized Selectors (Reselect/`createSelector`) ein wichtiges Leistungs- und Architekturtool; die gleiche Caching-Idee taucht als `useMemo` und `computed` an anderer Stelle auf.