Combine middlewares instead of putting them on top of each other

[gearonix]

There can be a lot of middlewares, so the idea came up to create a
combineMiddlewares function that will simplify the process.

So instead of this

const useShowcaseStore = create<BoundStore>()(persist(devtools(immer((...args) => ({
  ...createStateSlice(...args),
  actions: createActionsSlice(...args),
  services: createServices(...args)
}))), { version: 1, name: 'showcaseStore' }))

We do this

const instance = combineMiddlewares(persist, devtools, [immer, { version: 1 }])

const useShowCaseStore = instance<BoundStore>((...args) => ({
  ...createStateSlice(...args),
  actions: createActionsSlice(...args),
  services: createServices(...args)
})({
  persist: { name: 'showcaseStore' }
}))

const useShowCaseStore = instance<BoundStore>({
  persist: { name: 'showcaseStore' },
  impl: (...args) => ({
    ...createStateSlice(...args),
    actions: createActionsSlice(...args),
    services: createServices(...args),
  }),
})

Or it can be like this

const instance = create.configure(persist, devtools, [immer, { version: 1 }])

I'll try to implement the first version and submit a PR if it's a good idea.

[dai-shi]

I think this is related: #224

It should be pretty easy with JS, and extremely difficult with TS.
I don't think it's going to be an official util, but third-party library or recipes in docs might be options.

[gearonix]

@dai-shi I made one solution here; Take a look -https://github.com/gearonix/zustand-middlewares. I'm waiting for feedback, will cover it with tests later. Enjoy!

[dai-shi]

That looks amazing! You are a TS expert!
I would change it slightly to make it independent from Zustand (no dependencies in terms of JS).

import { create } from 'zustand'
import { pipe } from 'zustand-middlewares'

const enhance = pipe(
  [persist, { name: 'favorite-repos', version: 2 }],
  immer,
  [devtools, { name: 'repos' }],
  subscribeWithSelector
)

const useMyStore = enhance(create, { devtools: { enabled: true } })((set) => ({
  ids: [],
  add: (id: number) => {
    set((state) => ({
      ids: [...state.ids, id]
    }))
  }
}))

or something like that.

[jadejr]

@gearonix: Does it happen to work for you with the middleware options that are functions like with something like partialize: ({ actions, ...rest }: Store) => rest, for the persist middlware ot any function argument to storage? I'm not sure If i'm doing it wrong, but I am seeing const create: "persist: middleware has no options, or the options given are incorrect." when i use either of these options, but name and version seem to work correctly.