Learn Redux - Custom Middleware & Enhancers

#Introduction

Up to episode 12 we used the middleware RTK provides. But production apps often need special behavior: logging every action, sending telemetry to analytics, or interacting with external libraries. Episode 16 opens that black box — you'll learn to write custom middleware and understand enhancers for extending the store's capabilities.

Middleware and enhancers are two different layers. Middleware intercepts actions before they reach reducers. Enhancers wrap the store itself, making it possible to replace how dispatch, getState, and subscribe work. Both can be safely combined with RTK's default middleware.

#Middleware Structure

#Middleware Anatomy

Middleware takes the shape of a three-level nested function: (storeAPI) => (next) => (action). storeAPI holds dispatch and getState, next forwards the action to the next middleware, and the innermost layer executes per action:

src/app/middleware/logger.ts

import type { Middleware } from "@reduxjs/toolkit"
 
export const loggerMiddleware: Middleware = (storeAPI) => (next) => (action) => {
  const prevState = storeAPI.getState()
  const result = next(action)
  const nextState = storeAPI.getState()
  console.log("Action:", action.type, { prevState, nextState })
  return result
}

Execution order matters: call next(action) first if the middleware wants to observe the state after reducers run, or handle the action yourself and skip next when you want to intercept it entirely. next is not dispatch — calling dispatch from inside a middleware can trigger an infinite loop.

#Middleware for Telemetry

Telemetry usually runs without blocking reducers: record the event, then forward the action. Add a meta property so the data doesn't pollute the state:

Middleware telemetri sederhana

import type { Middleware } from "@reduxjs/toolkit"
 
const TRACKED = ["order/created", "checkout/completed", "auth/loginSucceeded"]
 
export const telemetryMiddleware: Middleware = (storeAPI) => (next) => (action) => {
  const result = next(action)
  if (TRACKED.includes(action.type)) {
    const state = storeAPI.getState()
    navigator.sendBeacon?.("/api/telemetry", JSON.stringify({
      type: action.type,
      user: state.auth.user?.id,
      ts: Date.now(),
    }))
  }
  return result
}

navigator.sendBeacon sends telemetry asynchronously without blocking rendering. The middleware stays focused on side effects; telemetry data never enters the store.

#Mounting Custom Middleware

#Combining with the Default Middleware

Always combine custom middleware with the RTK defaults — without them, createAsyncThunk and RTK Query won't work. getDefaultMiddleware accepts a configuration and produces an array:

src/app/store.ts dengan custom middleware

import { configureStore } from "@reduxjs/toolkit"
import { loggerMiddleware } from "./middleware/logger"
import { telemetryMiddleware } from "./middleware/telemetry"
import { authSlice } from "../features/auth/authSlice"
 
export const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      loggerMiddleware,
      telemetryMiddleware,
    ),
})

.concat adds middleware after the defaults. If a middleware needs to see actions first, use .prepend. Order determines who captures an action first in the chain.

#Disabling the Default Middleware

Some default middleware can be tuned or turned off. Example: disabling the serializable check for data that genuinely isn't serializable:

Konfigurasi getDefaultMiddleware

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: ["drag/dropMove"],
      ignoredPaths: ["canvas.shapes"],
    },
  }),

Most cases don't need to disable these checks. If you must, use ignoredActions and ignoredPaths so the scope of the exception stays as narrow as possible — don't just set false.

#Enhancers and Store Extensions

#Wrapping the Store

An enhancer is a function that takes the store-creating function and returns a richer store. Middleware itself is an example of an enhancer: RTK Query is injected through the internal applyMiddleware enhancer. Here's a simple enhancer example that adds a method to the store:

Enhancer custom sederhana

import type { StoreEnhancer } from "@reduxjs/toolkit"
 
export const versionedStore: StoreEnhancer =
  (createStore) => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState)
    return {
      ...store,
      version: "2026.1",
    }
  }

An enhancer wraps the original store and adds a property. In practice you rarely write your own enhancer — the more common task is integrating enhancers from external libraries that add store capabilities.

#Arranging Enhancers in configureStore

configureStore accepts enhancers as a function that can append enhancers around the defaults:

Menyusun enhancers

import { configureStore } from "@reduxjs/toolkit"
import { versionedStore } from "./enhancers/versionedStore"
 
export const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
  },
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers().concat(versionedStore),
})

getDefaultEnhancers() returns the built-in enhancers such as DevTools and middleware. Adding an enhancer at the end makes it the outermost wrapper — suitable for store-level logging or external updates.

#Conclusion

Custom middleware and enhancers give Redux unlimited extensibility. Middleware intercepts actions for logging, tracking, and telemetry without touching reducers; enhancers wrap the store for integration with external libraries. Both work alongside RTK's default middleware — as long as you understand execution order and don't break the next flow.

Key takeaways:

• Middleware has the shape (storeAPI) => (next) => (action).
• Call next(action) to forward an action to reducers; don't call dispatch inside it.
• Combine custom middleware with getDefaultMiddleware().concat(...).
• Tune the default middleware minimally via ignoredActions and ignoredPaths.
• Enhancers wrap the store and can add methods or change dispatch behavior.
• Arrange enhancers through the enhancers option in configureStore.

In the next episode, episode 17 goes deeper into advanced RTK Query — you'll explore pagination and infinite queries, GraphQL with graphql-request, streaming updates, prioritized prefetching, OpenAPI codegen, and a custom baseQuery for multi-API and auth refresh.