Middleware to always use 'shallow' or other EqualityChecker if not defined otherway?

[laurib]

I usually always need 'shallow' for comparison, but i can't figure out how to make correctly typed middleware.

I have been using enhancer function with zustand 2:

const enhancer = (useStore) => (selector,equalityFn) => {
  if (selector) {
    return useStore(selector, typeof equalityFn !== 'undefined' ? equalityFn : shallow);
   }
   return useStore();
};

But now updating to zustand 3, i cant figure out how to type it and is it correct way to do it?
Maybe it should be done with middleware ?

Can someone help ?

[dai-shi]

Instead of struggling with store creator, would you make a custom hook?

const useStoreOrig = create(...)
const useStore = (selector, equalityFn = shallow) => useStoreOrig(selector, equalityFn)

I think it would be easier to type.

[dai-shi]

Just a guess, but would this work?

  const useStoreShallow = <T>(selector: StateSelector<S, T>, equalityFn: EqualityChecker<T> = shallow) => useStore(selector, equalityFn);

[laurib]

i get this kind of error:

Type '<T>(selector: StateSelector<S, T>, equalityFn?: EqualityChecker<T>) => T' is missing the following properties from type 'UseStore<S>': setState, getState, subscribe, destroy, dispatch

[dai-shi]

Do you want to export all those apis? Then, we'd need something like Object.assign(useStoreShallow, useStore) and typing becomes a bit tricky.

Otherwise, you want to change the type of Store<S, U>. Not sure how it's defined.

[laurib]

Yes. I'd like to use all those api calls.
Well i possibly could do something like const [useMyStore, actions, api ] = createStore(....) where useMyStore is useStoreShallow and api is useStore ? But it could be nice using useStoreShallow for api calls

My Store type
export type Store<S, U extends ActionCreators<S>> = [UseStore<S>, Actions<U>];

[dai-shi]

const [useMyStore, actions, api ] = createStore(....)

Well, I personally like this.

Anyway, if you want the same signature, you need Object.assign and in this case temporary any would be just easier.

const useStoreShallow: any = (selector, equalityFn) => useStore(selector, equalityFn || selector && shallow);
Object.assign(useStoreShallow, useStore)

I tweaked to support non-selector version. (Now, this gets complicated more than I first expected.)