Mitä ovat selektorit ja memoization tilanhallinnassa?

Question

Accepted Answer

**Selektor** on funktio, joka **lukee (johtaa) tietystä osasta dataa tilasta**. **Memoization** välimuistittaa seektori tuloksen, jotta se lasketaan uudelleen vain, kun sen syötteet muuttuvat — tärkeää suorituskykylle, kun selektorit tekevät kallista työtä tai välttääkseen tarpeettomia re-renders.

## Perusselektorit — kapsuloi tilanapääsy

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

Selektorit keskittävät tietämyksen tilarakenteesta — komponentit pyytävät `selectCartTotal(state)` tietämättä missä/miten se tallennetaan, joten jos tilamuoto muuttuu, päivität yhden seektori, ei jokaista komponenttia.

## Ongelma: johdetut selektorit laskevat uudelleen jokaisen kutsun kohdalla

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

Selektor, joka luo uuden taulukon/objektin, palauttaa **uuden viittauksen** jokaisen kutsun kohdalla — mikä voi laukaista turhat re-renders (React näkee "uuden" arvon) ja tuhlaa laskentaa.

## Ratkaisu: muistinvaraisesti tallennetut selektorit (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` välimuistittaa tuloksen ja suorittaa kalliin laskelman uudelleen vain, kun sen syötteet (`state.items`) todella muuttuvat — muuten se palauttaa **saman viittauksen**, estäen sekä uudelleenlaskimen että alavirtaan olevan re-renders.

## Selektorien yhdistäminen

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

Selektorit yhdistyvät, rakentaen monimutkaisia johtoja yksinkertaisista, yksittäin välimuistitetuista osista.

## Miksi tämä on tärkeää

Selektorit erottavat komponentit tilamuodosta (ylläpidettävyysvoitto) ja tarjoavat yhden paikan johdetun datan ilmaisemiseen.

Memoization tekee johdetuista selektoreista tehokkaita — välttää toistuvaa kallista laskentaa ja ratkaisevasti palauttaa vakaita viittauksia, jotta yhdistetyt komponentit eivät re-renderoidu tarpeetta.

Redux/NgRx-sovelluksissa muistiinvaraiset selektorit (Reselect/`createSelector`) ovat keskeinen suorituskykyn ja arkkitehtuurin työkalu; sama välimuistin idea näkyy muualla `useMemo` ja `computed` nimillä.