Durum yönetiminde selektörler ve memoization nedir?

Question

Accepted Answer

**Selektör**, **durumdan belirli bir veri parçasını okuyan (türeten) bir fonksiyondur**. **Memoization**, bir selektörün sonucunu önbelleğe alır, böylece yalnızca girdileri değiştiğinde yeniden hesaplanır — selektörler pahalı çalışma yaptığında veya gereksiz yeniden renderlemeleri önlemek için performans açısından önemlidir.

## Temel selektörler — duruma erişimi kapsülle

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

Selektörler, durumun yapısı hakkındaki bilgiyi merkezileştirir — bileşenler `selectCartTotal(state)` ister ve nereye/nasıl saklandığını bilmeden, bu nedenle durum şekli değişirse bir selektörü güncellemelisiniz, her bileşeni değil.

## Sorun: Türetilmiş selektörler her çağrıda yeniden hesaplanır

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

Yeni bir dizi/nesne oluşturan selektör, her çağrıda **yeni bir referans** döndürür — bu gereksiz yeniden renderlemeleri tetikleyebilir (React "yeni" bir değer görür) ve hesaplamayı boşa harcayabilir.

## Çözüm: Memoize edilmiş selektörler (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` sonucu önbelleğe alır ve yalnızca girdileri (`state.items`) gerçekten değiştiğinde pahalı hesaplamayı yeniden çalıştırır — aksi takdirde **aynı referansı** döndürerek hem yeniden hesaplanmayı hem de alt akış yeniden renderlemelerini engeller.

## Selektörleri oluşturma

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

Selektörler bileşendir ve basit, bireysel olarak önbelleğe alınmış parçalardan karmaşık türetmeler oluşturur.

## Neden önemli

Selektörler bileşenleri durumun şeklinden ayırır (bakım için bir kazanç) ve türetilmiş verileri ifade etmek için tek bir yer sağlar.

Memoization, türetilmiş selektörleri verimli hale getirir — tekrarlanan pahalı hesaplamayı önler ve çok önemlisi, bağlı bileşenlerin gereksiz yere yeniden renderlemesi olmaması için sabit referanslar döndürür.

Redux/NgRx uygulamalarında, memoize edilmiş selektörler (Reselect/`createSelector`) performans ve mimari için kilit bir araçtır; aynı önbelleğe alma fikri başka yerlerde `useMemo` ve `computed` olarak görünür.