Apa itu normalisasi state?

Question

Accepted Answer

**Normalisasi** berarti menyimpan data dalam struktur datar, relasional — dikunci dengan **id** di tabel pencarian — bukan objek/array yang bersarang dalam. Ini adalah ide yang sama seperti normalisasi basis data, diterapkan pada state klien, dan membuat pembaruan dan pencarian efisien dan konsisten.

## Masalah dengan state bersarang/denormalisasi

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

Data bersarang yang diduplikasi harus diperbarui di banyak tempat (risiko ketidakkonsistenan), dan menemukan item berarti memindai array (O(n)).

## Bentuk ternormalisasi

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

Setiap entitas disimpan sekali, dikunci dengan id; relasi hanyalah referensi id.

## Manfaatnya

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

## Alat

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

## Mengapa ini penting

Normalisasi adalah pola standar untuk mengelola **data relasional/koleksi** dalam state klien (terutama di Redux).

Ia memberlakukan sumber kebenaran tunggal per entitas (perbarui sekali, tercermin di mana-mana), memberikan pencarian cepat berbasis id, dan menghindari bug dan masalah kinerja dari data bersarang dalam dan duplikat.

Untuk aplikasi dengan daftar entitas terkait (pengguna, posting, komentar) yang diperbarui dan direferensikan silang, menormalisasi store — sering kali melalui `createEntityAdapter` — adalah teknik kunci untuk menjaga state tetap konsisten dan efisien.