Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Advanced

State Normalization

Definition

Structuring state shape similar to a database, using flat lookup tables indexed by IDs rather than deeply nested arrays, to make state updates efficient and predictable.

Explain Like I'm New

If you have a list of 1,000 Users, and each User has an array of 50 Posts. If you want to edit Post #42, searching through an Array inside an Array is painfully slow. Normalization splits them into two flat dictionaries: `users: { id: {} }` and `posts: { id: {} }`. You can look up Post #42 instantly.

Real World Example

Designing a Twitter clone. Instead of `user.tweets.replies[0]`, you store `usersById`, `tweetsById`, and `repliesById`. A tweet just holds an array of reply IDs: `[1, 2, 3]`.

Common Use Cases

  • Optimizing massive lists
  • Preventing duplicated data bugs

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • What data structure is used to hold the items in a Normalized state?

intermediate

  • What is `createEntityAdapter` in Redux Toolkit?

Flash Cards

Question

Data structure?

Click to reveal answer
Answer

An Object (used as a dictionary/hash map), where the Keys are the Item IDs, and the Values are the Item data.

Question

createEntityAdapter?

Click to reveal answer
Answer

It is an RTK utility that literally writes all the boilerplate logic for normalizing data for you. It automatically generates reducers like `addOne`, `addMany`, and `removeOne`.