Normalized State

Learn to structure your Redux state using normalized patterns for better performance and maintainability.

25 min

2 sections

normalization

data-structure

performance

01. Why Normalize?

Section 1 of 2

Normalized state avoids data duplication, makes updates easier, and improves performance. Think of it like database tables.

typescript

// Denormalized (bad practice)
{
  posts: [
    { id: 1, title: 'Post 1', author: { id: 1, name: 'John' } },
    { id: 2, title: 'Post 2', author: { id: 1, name: 'John' } } // Duplicate!
  ]
}

// Normalized (better)
{
  posts: {
    byId: {
      1: { id: 1, title: 'Post 1', authorId: 1 },
      2: { id: 2, title: 'Post 2', authorId: 1 }
    },
    allIds: [1, 2]
  },
  authors: {
    byId: {
      1: { id: 1, name: 'John' }
    },
    allIds: [1]
  }
}

Exercise

Normalize Comments State

Practice

Convert a denormalized comments array into normalized state structure.

Reducer Composition

Introduction to RTK Query

Back to Course