ما هي الـ selectors والـ memoization في إدارة الحالة؟

Question

Accepted Answer

**selector** هي دالة **تقرأ (تشتق) جزءًا محددًا من البيانات من الحالة**. **Memoization** تخزن مؤقتًا نتيجة selector بحيث تعيد الحساب فقط عندما تتغير المدخلات — وهذا مهم للأداء عندما تقوم selectors بعمل مكلف أو لتجنب re-renders غير ضروري.

## Selectors الأساسية — تغليف الوصول للحالة

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

تركز Selectors المعرفة ببنية الحالة — تطلب المكونات `selectCartTotal(state)` دون معرفة أين/كيف يتم تخزينها، لذلك إذا تغيرت شكل الحالة فتحدث selector واحد وليس كل مكون.

## المشكلة: selectors المشتقة تعيد الحساب في كل استدعاء

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

Selector الذي ينشئ مصفوفة/كائن جديد يعيد **مرجعًا جديدًا** في كل استدعاء — وهذا قد يؤدي إلى re-renders غير ضروري (React يرى قيمة "جديدة") ويهدر الحسابات.

## الحل: memoized selectors (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` تخزن مؤقتًا النتيجة وتعيد تشغيل الحساب المكلف فقط عندما تتغير مدخلاتها (`state.items`) فعليًا — وإلا فإنها تعيد **نفس المرجع**، مما يمنع إعادة الحساب و re-renders اللاحقة.

## تكوين Selectors

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

تتكون Selectors من بعضها، وتبني اشتقاقات معقدة من أجزاء بسيطة مخزنة مؤقتًا بشكل فردي.

## لماذا هذا مهم

تفصل Selectors المكونات عن شكل الحالة (فائدة الصيانة) وتوفر مكانًا واحدًا للتعبير عن البيانات المشتقة.

تجعل Memoization المشتقة selectors فعالة — تجنب الحسابات المكلفة المتكررة وبشكل حاسم، إرجاع مراجع مستقرة بحيث لا تعيد المكونات المتصلة rendering بدون داع.

في تطبيقات Redux/NgRx، تُعتبر memoized selectors (Reselect/`createSelector`) أداة أداء وعمارة رئيسية؛ تظهر نفس فكرة التخزين المؤقت كـ `useMemo` و `computed` في أماكن أخرى.