Apakah selector dan memoization dalam pengurusan state?

Question

Accepted Answer

Sebuah **selector** ialah fungsi yang **membaca (menerbitkan) sekeping data tertentu daripada state**. **Memoization** menyimpan cache hasil selector supaya ia hanya mengira semula apabila inputnya berubah — penting untuk prestasi apabila selector melakukan kerja yang mahal atau untuk mengelakkan render semula yang tidak perlu.

## Selector asas — merangkum akses state

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

Selector memusatkan pengetahuan tentang struktur state — komponen meminta `selectCartTotal(state)` tanpa mengetahui di mana/bagaimana ia disimpan, jadi jika bentuk state berubah anda mengemas kini satu selector, bukan setiap komponen.

## Masalahnya: selector terbitan mengira semula pada setiap panggilan

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

Selector yang mencipta array/objek baharu memulangkan **rujukan baharu** pada setiap panggilan — yang boleh mencetuskan render semula yang tidak perlu (React melihat nilai "baharu") dan membazirkan pengiraan.

## Penyelesaiannya: selector ter-memoize (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` menyimpan cache hasil dan hanya menjalankan semula pengiraan mahal apabila inputnya (`state.items`) benar-benar berubah — jika tidak ia memulangkan **rujukan yang sama**, menghalang kedua-dua pengiraan semula dan render semula hiliran.

## Menggubah selector

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

Selector boleh digubah, membina terbitan yang kompleks daripada kepingan ringkas yang dicache secara individu.

## Mengapa ia penting

Selector menyahgandingkan komponen daripada bentuk state (satu kelebihan kebolehselenggaraan) dan menyediakan satu tempat untuk menyatakan data terbitan.

Memoization menjadikan selector terbitan cekap — mengelakkan pengiraan mahal yang berulang dan, yang penting, memulangkan rujukan stabil supaya komponen yang disambung tidak render semula secara tidak perlu.

Dalam aplikasi Redux/NgRx, selector ter-memoize (Reselect/`createSelector`) ialah alat prestasi dan seni bina yang utama; idea cache yang sama muncul sebagai `useMemo` dan `computed` di tempat lain.