TypeScript example of optional middleware in zustand v4

[dasblitz]

Hi, I'm in the process of upgrading from zustand v3 to v4.

In v3 I had types working and I could optionally add (devtools) middleware like so:

type StoreState = {
 foo: string
}

const middleware = subscribeWithSelector(
  persist<
    StoreState,
    SetState<StoreState>,
    GetState<StoreState>
  >(
    (set, get) => ({
       foo: 'bar'
    }),
    {
      // persist options
    }
  )
)

// Optionally include devtools middleware
const createWithMiddleware = () => {
  if (process.env.NODE_ENV === 'test') {
    return middleware;
  } else {
    return devtools(middleware);
  }
};

export const useStore = create(createWithMiddleware());

However in v4 I can only get the types to pass by following this example:
https://docs.pmnd.rs/zustand/guides/typescript#using-middlewares but that makes it a bit difficult to do optional middleware without repeating a lot of code.

I've tried using ramda pipe, like mentioned in this discussion: #224 (reply in thread) but it seems a bit outdated already and I can't get the typing right. If someone could give me a pointer in the right direction that would be very helpful 🙏🏻

[dai-shi]

I also tried with optional devtools middleware. thought it's impossible?
@devanshj can you help?

[devanshj]

How about just this...

import create from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const envAwareDevtools = 
  ( process.env.NODE_ENV === "production"
      ? f => f
      : devtools
  ) as typeof devtools

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()(
  envAwareDevtools(
    persist((set) => ({
      bears: 0,
      increase: (by) => set((state) => ({ bears: state.bears + by })),
    }))
  )
)

Now instead of writing devtools you can just write envAwareDevtools instead of doing the unnecessary hassle to type the middleware and createWithMiddleware in the original code. Let me know if this doesn't work for you and if you want types for your original code.

[dasblitz]

Ah yes I thought of a conditional identity function, but didn't understand how to type it. Never crossed my mind I could just type the identity function with as typeof devtools as well. I guess it makes sense since it's just 'fooling' TypeScript. Also that was after I was trying a ramba pipe solution for over two hours already ending up here: microsoft/TypeScript#44999 (comment) and my imposter syndrome kicked in, so I gave up after 10 minutes 😅

Thx for the quick answer!

[devanshj]

Haha no you're good. The pipe thing won't work, with v4 one must write middlewares as x(y(z(...))) so as to make the contextual inference work.

And yes we'd have to fool TypeScript because if we don't then the store type becomes a union something like WithPersist<StoreApi<T>> | WithDevtools<WithPersist<StoreApi<T>> which could create problems and is unnecessary.