Piping produce, redux, devtools, logger and create

[GZLiew]

Hi does anyone know if this is possible ?

const createStore = pipe(redux, immerProduce, devtools, logger, create

Im getting a type error for immer

heres my immer function

[harshagarwalnyu]

The type error when piping immer is a known friction point from zustand v3. The pipe utility's TypeScript inference breaks because immer's overloaded types don't compose cleanly with the generic middleware signature.

Modern fix (zustand v4+) — nest middleware directly:

Zustand v4 replaced pipe with direct nesting:

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { devtools, redux } from 'zustand/middleware';

const useStore = create()(
  devtools(
    immer(
      redux(reducer, initialState)
    )
  )
);

Why nesting works but pipe breaks: Each middleware is a higher-order function wrapping the store creator. TypeScript propagates types through direct nesting. pipe requires all middleware to share a compatible generic signature — immer's signature differs (it transforms the set function type).

For the exact pipe pattern (zustand v3 workaround):

const createStore = pipe(
  redux,
  immer as any,  // type-cast: immer's overload conflicts with pipe's inference
  devtools,
  logger,
  create
);

Recommended for new code — nesting with explicit type:

interface State {
  count: number;
  increment: () => void;
}

const useStore = create<State>()(
  devtools(
    immer((set) => ({
      count: 0,
      increment: () => set((state) => { state.count++ }),
    }))
  )
);

Reading order for nesting: outermost middleware wraps last (runs first on external calls). So devtools(immer(...)) means devtools intercepts first, then immer transforms set before it reaches your store logic.