Q333: What is normalized Redux state? - React & Modern Frontend (445 Qs)

Normalized state stores data the way a relational database would: each type of entity is kept in a lookup table keyed by ID, instead of being nested/duplicated inside arrays. Redux Toolkit's createEntityAdapter generates this shape for you.

javascript

// Un-normalized — posts are duplicated wherever they appear
{
posts: [
  { id: 1, title: "Post 1", author: { id: 1, name: "Alex" } },
  { id: 2, title: "Post 2", author: { id: 1, name: "Alex" } },
];
}

// Normalized — each entity stored once, referenced by id
{
posts: {
  ids: [1, 2],
  entities: {
    1: { id: 1, title: "Post 1", authorId: 1 },
    2: { id: 2, title: "Post 2", authorId: 1 },
  },
},
users: {
  ids: [1],
  entities: { 1: { id: 1, name: "Alex" } },
},
}

javascript

import { createEntityAdapter, createSlice } from "@reduxjs/toolkit";

const postsAdapter = createEntityAdapter();

const postsSlice = createSlice({
name: "posts",
initialState: postsAdapter.getInitialState(),
reducers: {
  postAdded: postsAdapter.addOne,
  postUpdated: postsAdapter.updateOne,
},
});