Redux Toolkit Architecture: State Normalization, RTK Query Pipelines, and Reselect Memoization

Redux Toolkit Architecture: State Normalization & RTK Query Pipelines

An engineering guide to modern React-Redux state management: slice composition, normalized state schemas using `createEntityAdapter`, zero-boilerplate API caching with RTK Query, and efficient selector memoization with Reselect.

Legacy Redux patterns plagued React codebases with excessive boilerplate, deeply nested state trees, and unmemoized selectors that triggered widespread UI re-renders. Modern Redux engineering relies on Redux Toolkit (RTK), which enforces immutability via Immer, normalizes relational data, and decouples server state caching from client-side state logic.

 

---

1. Core Architecture: Unidirectional Data Flow & Immutability

Redux enforces a strict unidirectional data flow. Modern RTK streamlines this process by wrapping action creators and reducers into cohesive Slices while leveraging Immer under the hood to handle structural sharing and immutable updates safely.

1. ACTION DISPATCH

Event Signalling

UI components dispatch strongly typed payload actions to communicate state mutations without directly modifying data.

2. IMMER REDUCER

Mutative Syntax

RTK uses Immer proxies to draft state changes using mutable syntax while producing a completely immutable state tree snapshot.

3. SELECTOR DERIVATION

Memoized Reactivity

Reselect computes derived UI state, triggering component updates only when specific slice dependencies mutate.

---

2. Production Slice Implementation & Normalization

Flat, normalized state structures prevent expensive array lookups and cascading re-renders when single entity records update. We utilize createEntityAdapter to maintain relational items inside a lookup dictionary (ids array and entities map).

TypeScript RTK Entity Adapter Slice (normalizedState.ts)

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

export interface User {
  id: string;
  name: string;
  role: string;
  status: 'active' | 'inactive';
}

// Entity Adapter provides pre-built CRUD operations & normalized state shape
const usersAdapter = createEntityAdapter<User>({
  selectId: (user) => user.id,
  sortComparer: (a, b) => a.name.localeCompare(b.name),
});

export const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState({
    activeFilter: 'all' as 'all' | 'active' | 'inactive',
  }),
  reducers: {
    userAdded: usersAdapter.addOne,
    userUpdated: usersAdapter.updateOne,
    userRemoved: usersAdapter.removeOne,
    setFilter(state, action: PayloadAction<'all' | 'active' | 'inactive'>) {
      state.activeFilter = action.payload;
    },
  },
});

export const { userAdded, userUpdated, userRemoved, setFilter } = usersSlice.actions;
export default usersSlice.reducer;

---

3. Derived State: Memoized Reselect Pipelines

Executing array operations (such as .filter() or .map()) directly inside React hooks or unmemoized selectors creates new array references on every dispatch, bypassing React's reference check optimization.

Memoized Selectors using Reselect & Entity Selectors (userSelectors.ts)

import { createSelector } from '@reduxjs/toolkit';
import { RootState } from './store';
import { usersSlice } from './usersSlice';

// Extract pre-built selectors from Entity Adapter
const adapterSelectors = usersSlice.getSelectors((state: RootState) => state.users);

export const selectAllUsers = adapterSelectors.selectAll;
export const selectUserEntities = adapterSelectors.selectEntities;
export const selectUserFilter = (state: RootState) => state.users.activeFilter;

// Memoized selector: Computation runs ONLY when selectAllUsers or selectUserFilter outputs change
export const selectFilteredUsers = createSelector(
  [selectAllUsers, selectUserFilter],
  (users, filter) => {
    if (filter === 'all') return users;
    return users.filter((user) => user.status === filter);
  }
);

---

4. Asynchronous Server State: RTK Query

Server state management involves caching, deduplication, invalidation, and optimistic updates. RTK Query decouples network side effects from local UI slices entirely.

RTK Query API Endpoint Definition (apiSlice.ts)

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { User } from './usersSlice';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/v1' }),
  tagTypes: ['Users'],
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => '/users',
      providesTags: (result) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Users' as const, id })), { type: 'Users', id: 'LIST' }]
          : [{ type: 'Users', id: 'LIST' }],
    }),
    updateUser: builder.mutation<User, Partial<User> & { id: string }>({
      query: ({ id, ...patch }) => ({
        url: `/users/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      // Automatically invalidates cache tag to trigger refetch for affected components
      invalidatesTags: (result, error, { id }) => [{ type: 'Users', id }],
    }),
  }),
});

export const { useGetUsersQuery, useUpdateUserMutation } = apiSlice;

---

5. Architectural Decision Matrix

Choosing the right state management abstraction based on state locality and update frequency:

State Architecture Level	Primary Tool	Data Structure / Pattern	Primary Use Case
Component Local State	React `useState` / `useReducer`	Isolated Hook State	Form inputs, UI toggles, modal open/close states
Global Client State	Redux Toolkit Slices	Normalized Object Maps via Immer	User permissions, app theme preferences, multi-step flows
Derived / Computed State	Reselect (`createSelector`)	Memoized Computation Graph	Filtered/sorted lists, complex aggregated statistics
Server Data Caching	RTK Query	Tag-based Normalized Network Cache	REST/GraphQL data fetching, polling, background sync

---

⚡ Redux Engineering Best Practices

• Keep State Normalized: Avoid storing nested array objects inside Slices. Use createEntityAdapter to maintain flat relational lookups.
• Never Store Server State in Slices: Delegate all REST API cache logic, pagination, and fetching state flags to RTK Query.
• Always Memoize Array Computations: Never invoke .filter() or .map() directly inside unmemoized inline hooks; wrap logic with createSelector to retain referential stability.
• Serialize Action Payloads: Avoid passing non-serializable objects (such as Promises, class instances, or Functions) inside action dispatch payloads.

Mastering modern Redux lies in separating client-side UI mutations from server cache invalidation while enforcing strict referential stability across components.

Happy Engineering! 🚀