State normalization là gì?

Question

Accepted Answer

**Normalization** (chuẩn hóa) nghĩa là lưu dữ liệu trong một cấu trúc phẳng, quan hệ — đánh khóa theo **id** trong các bảng tra cứu (lookup table) — thay vì các object/array lồng sâu. Đó là cùng ý tưởng với chuẩn hóa cơ sở dữ liệu, áp dụng vào client state, và nó làm cho việc cập nhật và tra cứu hiệu quả và nhất quán.

## Vấn đề với state lồng nhau/không chuẩn hóa

```js
// ❌ lồng nhau & trùng lặp — cùng một user xuất hiện trong nhiều post
posts: [
  { id: 1, title: "A", author: { id: 10, name: "Ann" } },
  { id: 2, title: "B", author: { id: 10, name: "Ann" } }, // Ann bị trùng lặp
]
// Để đổi tên Ann, bạn phải tìm và cập nhật MỌI bản sao → dễ bỏ sót (drift)
// Để tìm post #2, bạn phải quét cả array
```

Dữ liệu lồng nhau trùng lặp phải được cập nhật ở nhiều nơi (nguy cơ không nhất quán), và tìm một item nghĩa là quét các array (O(n)).

## Hình dạng đã chuẩn hóa

```js
// ✅ các bảng tra cứu phẳng đánh khóa theo id, tham chiếu nhau bằng id
{
  posts: {
    byId: { 1: { id: 1, title: "A", authorId: 10 },   // tham chiếu author bằng id
            2: { id: 2, title: "B", authorId: 10 } },
    allIds: [1, 2],                                     // thứ tự/lặp
  },
  users: {
    byId: { 10: { id: 10, name: "Ann" } },             // mỗi user lưu MỘT lần
  },
}
```

Mỗi entity được lưu một lần, đánh khóa theo id; các mối quan hệ chỉ là các tham chiếu id.

## Các lợi ích

```js
state.users.byId[10];                        // ✅ tra cứu O(1) theo id
state.users.byId[10] = { ...u, name: "Bob" }; // ✅ cập nhật Ann MỘT lần → phản ánh khắp nơi
state.posts.allIds.map(id => state.posts.byId[id]); // lặp qua danh sách id
```

```text
✓ Single source of truth cho mỗi entity → không trùng lặp, không drift
✓ Tra cứu/cập nhật O(1) theo id (so với quét array)
✓ Dễ cập nhật một entity và mọi tham chiếu phản ánh theo
✓ Đơn giản hơn để quản lý mối quan hệ và merge dữ liệu mới
```

## Công cụ

```text
createEntityAdapter của Redux Toolkit sinh ra cấu trúc chuẩn hóa { ids, entities }
+ các CRUD reducer tự động. normalizr có thể chuẩn hóa response API.
```

## Tại sao điều này quan trọng

Normalization là pattern tiêu chuẩn để quản lý **dữ liệu quan hệ/collection** trong client state (đặc biệt trong Redux).

Nó áp đặt single-source-of-truth cho mỗi entity (cập nhật một lần, phản ánh khắp nơi), cho tra cứu nhanh theo id, và tránh các bug cùng vấn đề hiệu năng của dữ liệu lồng sâu, trùng lặp.

Với các app có danh sách entity liên quan (user, post, comment) được cập nhật và tham chiếu chéo, chuẩn hóa store — thường qua `createEntityAdapter` — là một kỹ thuật then chốt để giữ state nhất quán và hiệu quả.