რა არის selector-ები და memoization state management-ში?

Question

Accepted Answer

**selector** არის ფუნქცია, რომელიც **წაკითხულობს (წარმოქმნის) state-ის კონკრეტული ნაწილს**. **Memoization** აკეშირებს selector-ის შედეგს, ისე რომ ის მხოლოდ მაშინ გამოთვალოს თავიდან, როდესაც მისი inputs შეიცვლება — ეს მნიშვნელოვანია performance-ის თვალსაზრისით, როდესაც selector-ები ძვირადღირებული სამუშაოს ასრულებენ ან გაზედმეტი re-render-ების თავიდან აცილების დროს.

## ძირითადი selector-ები — encapsulate state access

```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-ები ცენტრალიზებენ state-ის სტრუქტურის ცოდნას — კომპონენტები ითხოვენ `selectCartTotal(state)` იმის ცოდნის გარეშე, თუ სად/როგორ ხდება ის შენახვა, ამიტომ თუ state-ის ფორმა შეიცვლება, თქვენ განაახლებთ ერთ selector-ს, არა ყველა კომპონენტს.

## პრობლემა: derived selector-ები გამოთვალოვენ ყოველი გამოძახების დროს

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

Selector, რომელიც ქმნის ახალ array/object-ს, აბრუნებს **ახალ reference-ს** ყოველი გამოძახების დროს — რომელიც შეიძლება გამოიწვიოს გაზედმეტი re-render-ები (React ხედავს "ახალ" მნიშვნელობას) და აფლანგებს გამოთვლას.

## გადაწყვეტა: memoized selector-ები (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` აკეშირებს შედეგს და მხოლოდ ზედმეტ გამოთვლას ამ აფუჭებს, როდესაც მისი inputs (`state.items`) ნამდვილად იცვლება — სხვა შემთხვევაში ის აბრუნებს **იგივე reference-ს**, რაც ხელს უშლის როგორც გამოთვლის გამეორებას, ასევე downstream re-render-ებს.

## selector-ების კომპოზიცია

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

Selector-ები კომპოზირდება, უმარტივესი, ინდივიდუალურად კეშირებული ნაწილებიდან რთული derivation-ების აგებით.

## რატომ არის ეს მნიშვნელოვანი

Selector-ები ამოწყობენ კომპონენტებს state-ის ფორმისგან (maintainability-ის მოგება) და უზრუნველყოფენ ერთ ადგილს derived data-ს გამოხატვისთვის.

Memoization აკეთებს derived selector-ებს ეფექტური — აიცილებს განმეორებით ძვირადღირებული გამოთვლას და, უმნიშვნელოვანესი, აბრუნებს სტაბილურ reference-ებს, ისე რომ დაკავშირებული კომპონენტები არ გამოიცნობა გაზედმეტი re-render-ი.

Redux/NgRx აპ-ებში, memoized selector-ები (Reselect/`createSelector`) არის key performance და architecture ხელსაწყო; იგივე caching идея ჩნდება როგორც `useMemo` და `computed` სხვაგან.