Entity Adapter for Enterprise State

Use createEntityAdapter for normalized collections, stable selectors, and high-volume UI updates.

35 min

2 sections

createEntityAdapter

normalization

selectors

01. Normalize high-volume collections

Section 1 of 2

Enterprise screens often show thousands of tickets, invoices, users, or audit events. createEntityAdapter gives you a normalized { ids, entities } shape, generated reducers, and selectors without hand-writing fragile collection logic.

typescript

import {
  createEntityAdapter,
  createSlice,
  type PayloadAction,
} from '@reduxjs/toolkit';

type Ticket = {
  id: string;
  orgId: string;
  subject: string;
  priority: 'low' | 'normal' | 'high';
  updatedAt: string;
};

const ticketsAdapter = createEntityAdapter<Ticket>({
  sortComparer: (a, b) => b.updatedAt.localeCompare(a.updatedAt),
});

const ticketsSlice = createSlice({
  name: 'tickets',
  initialState: ticketsAdapter.getInitialState({
    selectedTicketId: null as string | null,
  }),
  reducers: {
    ticketsReceived: ticketsAdapter.upsertMany,
    ticketUpdated: ticketsAdapter.upsertOne,
    ticketSelected(state, action: PayloadAction<string>) {
      state.selectedTicketId = action.payload;
    },
  },
});

Advanced Patterns

Redux in Next.js App Router

Back to Course