การทำให้ state เป็นปกติคืออะไร?

Question

IT Interview Practice · Accepted Answer

**การทำให้เป็นปกติ** หมายความว่าการจัดเก็บข้อมูลในโครงสร้างแบบเรียบ เชิงความสัมพันธ์ — จัดทำดัชนีตาม **id** ในตารางค้นหา — แทนที่จะใช้ object/array ที่ซ้อนกันลึก มันเป็นแนวคิดเดียวกับการทำให้ฐานข้อมูลเป็นปกติ ที่นำไปใช้กับ client state และทำให้การอัปเดตและการค้นหามีประสิทธิภาพและสม่ำเสมอ

## ปัญหากับ state ที่ซ้อนกัน/ไม่เป็นปกติ

```js
// ❌ nested & duplicated — the same user appears in multiple posts
posts: [
  { id: 1, title: "A", author: { id: 10, name: "Ann" } },
  { id: 2, title: "B", author: { id: 10, name: "Ann" } }, // Ann duplicated
]
// To rename Ann, you must find and update EVERY copy → easy to miss one (drift)
// To find post #2, you must scan the array
```

ข้อมูลที่ซ้อนกันและซ้ำต้องอัปเดตในหลายตำแหน่ง (ความเสี่ยงจากความไม่สม่ำเสมอ) และการค้นหาไอเท็มหมายความว่าต้องสแกน array (O(n))

## รูปแบบที่ทำให้เป็นปกติ

```js
// ✅ flat lookup tables keyed by id, with references by id
{
  posts: {
    byId: { 1: { id: 1, title: "A", authorId: 10 },   // reference the author by id
            2: { id: 2, title: "B", authorId: 10 } },
    allIds: [1, 2],                                     // order/iteration
  },
  users: {
    byId: { 10: { id: 10, name: "Ann" } },             // each user stored ONCE
  },
}
```

แต่ละเอนทิตี้จัดเก็บเพียงครั้งเดียว จัดทำดัชนีตาม id; ความสัมพันธ์เป็นเพียง id reference เท่านั้น

## ประโยชน์

```js
state.users.byId[10];                        // ✅ O(1) lookup by id
state.users.byId[10] = { ...u, name: "Bob" }; // ✅ update Ann ONCE → reflected everywhere
state.posts.allIds.map(id => state.posts.byId[id]); // iterate via the id list
```

```text
✓ Single source of truth per entity → no duplication, no drift
✓ O(1) lookups/updates by id (vs scanning arrays)
✓ Easy to update one entity and have all references reflect it
✓ Simpler to manage relationships and merge new data
```

## เครื่องมือ

```text
Redux Toolkit's createEntityAdapter generates normalized { ids, entities }
structures + CRUD reducers automatically. normalizr can normalize API responses.
```

## ทำไมจึงมีความสำคัญ

การทำให้เป็นปกติคือรูปแบบมาตรฐานสำหรับจัดการ **ข้อมูลเชิงความสัมพันธ์/คอลเลกชัน** ใน client state (โดยเฉพาะใน Redux)

มันบังคับให้มีแหล่งความจริงเพียงแห่งเดียวต่อเอนทิตี้ (อัปเดตเพียงครั้งเดียว สะท้อนได้ทุกที่) ให้การค้นหาที่รวดเร็วตาม id และหลีกเลี่ยงบั๊กและปัญหาประสิทธิภาพจากข้อมูลที่ซ้อนกันลึกและซ้ำ

สำหรับแอปที่มีรายการเอนทิตี้ที่เกี่ยวข้อง (ผู้ใช้ โพสต์ ความเห็น) ที่อัปเดตและอ้างอิงไขว้กัน การทำให้ store เป็นปกติ — มักจะผ่าน `createEntityAdapter` — คือเทคนิคสำคัญสำหรับการรักษา state ให้สม่ำเสมอและมีประสิทธิภาพ

ปัญหากับ state ที่ซ้อนกัน/ไม่เป็นปกติ

รูปแบบที่ทำให้เป็นปกติ

ประโยชน์

เครื่องมือ

ทำไมจึงมีความสำคัญ

คำถามที่เกี่ยวข้อง