selectors และ memoization ในการจัดการสถานะคืออะไร

Question

Accepted Answer

**selector** เป็นฟังก์ชันที่**อ่าน (ได้มา) ข้อมูลเฉพาะจากสถานะ**। **memoization** จัดเก็บผลลัพธ์ของ selector ไว้ในแคช จึงจะคำนวณใหม่เมื่อ input เปลี่ยนเท่านั้น — สำคัญสำหรับประสิทธิภาพเมื่อ selector ทำงานที่ซับซ้อนหรือเพื่อหลีกเลี่ยง re-render ที่ไม่จำเป็น

## Selector พื้นฐาน — ห่อหุ้มการเข้าถึงสถานะ

```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 รวมศูนย์ความรู้เกี่ยวกับโครงสร้างสถานะ — components ขอ `selectCartTotal(state)` โดยไม่รู้ว่าเก็บไว้ที่ไหน/วิธีการ ดังนั้นหากรูปแบบสถานะเปลี่ยน คุณอัปเดต selector หนึ่งตัว ไม่ใช่ทุก component

## ปัญหา: 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 ใหม่ส่งคืน**การอ้างอิงใหม่**ในทุกการเรียก — ซึ่งอาจสร้าง 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` จัดเก็บผลลัพธ์ไว้ในแคชและ run การคำนวณแพงๆ เมื่อ input (`state.items`) เปลี่ยนจริง — มิฉะนั้นส่งคืน**การอ้างอิงเดียวกัน** ป้องกันทั้งการคำนวณใหม่และ 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 ประกอบขึ้น สร้างการได้มาที่ซับซ้อนจากชิ้นส่วนเรียบง่ายที่จัดเก็บแคชแต่ละรายการ

## ทำไมถึงสำคัญ

Selector แยก components จากรูปแบบสถานะ (ชนะเพื่อการดูแล) และให้ที่เดียวเพื่อแสดง derived data

Memoization ทำให้ derived selector มีประสิทธิภาพ — หลีกเลี่ยงการคำนวณแพงซ้ำๆ และที่สำคัญส่งคืน reference ที่เสถียร เพื่อไม่ให้ connected components re-render โดยไม่จำเป็น

ในแอป Redux/NgRx memoized selector (Reselect/`createSelector`) เป็นเครื่องมือสำคัญสำหรับประสิทธิภาพและสถาปัตยกรรม ไอเดีย caching เดียวกันนี้ปรากฏเป็น `useMemo` และ `computed` ที่อื่นๆ