Kas yra selektoriai ir memoizacija valstybės valdyme?

Question

Accepted Answer

**Selektorius** yra funkcija, kuri **skaitau (išvedžiu) konkretų duomenų gabalą iš valstybės**. **Memoizacija** talpina selektoriaus rezultatą talpykloje, kad jis būtų perskaičiuojamas tik tada, kai pasikeičia jo įėjimai — tai svarbu dėl našumo, kai selektoriai atliekama brangią operaciją arba siekiant išvengti nereikalingų perpiešimų.

## Pagrindiniai selektoriai — valstybės prieigos enkapsuliacija

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

Selektoriai centralizuoja žinias apie valstybės struktūrą — komponentai kreipiasi į `selectCartTotal(state)` nežinodami, kur / kaip jis saugomas, todėl jei valstybės forma pasikeis, jūs atnaujinate vieną selektorių, o ne kiekvieną komponentą.

## Problema: išvesti selektoriai perskaičiuojami kiekviename skambyje

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

Selektorius, kuris kiekvieną kartą sukuria naują masyvą / objektą, grąžina **naują nuorodą** — tai gali sukelti nereikalingus perpiešimus (React mato "naują" reikšmę) ir nešvaisčioja skaičiavimą.

## Sprendimas: memoizuoti selektoriai (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` talpina rezultatą talpykloje ir tik iš naujo paleidžia brangią skaičiavimo operaciją, kai jo įėjimai (`state.items`) iš tikrųjų pasikeičia — priešingu atveju grąžina **tą pačią nuorodą**, užkertant kelią tiek perskaičiavimui, tiek žemutiniams perpiešimams.

## Selektorių komponavimas

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

Selektoriai komponuojasi, sukurdami sudėtingas išvedžiojimas iš paprastų, atskirai talpintų dalių.

## Kodėl tai svarbu

Selektoriai atsiskiria komponentus nuo valstybės formos (priežiūros pergalė) ir suteikia vieną vietą, kur išreikšti išvestus duomenis.

Memoizacija daro išvestus selektorius efektyvius — venkiant pakartotinių brangių skaičiavimų ir, svarbu tai, grąžinant stabiles nuorodas, kad susieti komponentai neper­piešti be reikalo.

Redux/NgRx programose memoizuoti selektoriai (Reselect/`createSelector`) yra raktas į našumą ir architektūrą; ta pati talpinimo idėja pasirodo kaip `useMemo` ir `computed` kitur.