Wat is state normalization?

Question

Accepted Answer

**Normalization** betekent gegevens opslaan in een platte, relationele structuur — geïndexeerd op **id** in opzoektabellen — in plaats van diep geneste objecten/arrays. Het is hetzelfde idee als databasenormalisatie, toegepast op client state, en het maakt updates en zoekopdrachten efficiënt en consistent.

## Waarom het belangrijk is

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

Gedupleerde geneste gegevens moeten op veel plekken worden bijgewerkt (inconsistentierisico), en het vinden van een item betekent arrays scannen (O(n)).

## De genormaliseerde vorm

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

Elke entiteit wordt één keer opgeslagen, geïndexeerd op id; relaties zijn slechts id-verwijzingen.

## De voordelen

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

## Hulpmiddelen

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

## Waarom het belangrijk is

Normalisatie is het standaardpatroon voor het beheren van **relationele/verzamelingsgegevens** in client state (vooral in Redux).

Het dwingt single-source-of-truth per entiteit af (eenmaal bijwerken, overal zichtbaar), biedt snelle id-gebaseerde zoekopdrachten, en vermijdt de bugs en prestatieproblemen van diep geneste, gedupliceerde gegevens.

Voor apps met lijsten van gerelateerde entiteiten (users, posts, comments) die worden bijgewerkt en kruislings verwezen, is het normaliseren van de store — vaak via `createEntityAdapter` — een sleutelwerk voor het consistent en efficiënt houden van state.