Usage of subscribeWithSelector in vanilla stores

[evancloutier]

What is the correct way to initialize and type a vanilla store with the subscribeWithSelector?

I'm using zustand in a class like so:

import create, { UseBoundStore } from "zustand";
import createVanilla, { StoreApi } from "zustand/vanilla";

class MyClass<T extends Record<string, any>> {
  private store: StoreApi<T>;
  
  public readonly useStore: UseBoundStore<StoreApi<T>>;

  constructor(initialState: T) {
    this.store = createVanilla(() => initialState);
    this.useStore = create(this.store);
  }
}

I'd like to add subscribeWithSelector into the bound store instance, but I can't quite figure out the correct way to do so. I've tried:

this.store = createVanilla(subscribeWithSelector(() => initialState));
this.useStore = create(store);

But it seems that the selector functionality doesn't propagate to the bound store.

I'd like to subcribe by doing:

const instance = new MyClass();

instance.useStore.subscribe(state => ({ thing: state.thing }), ({ thing }) => {
  // do something!
}, { fireImmediately: true })

Thanks!

[dai-shi]

Is this a JS question? Not about TS?

zustand/src/react.ts

Line 74 in 5ca63d1

Object.assign(useBoundStore, api)

It should just attach the same api...

[dai-shi]

Btw, I generally suggest to avoid subscribeWithSelector for new projects (it's meant for migration). It doesn't give any performance improvement and typing is really hard.

[evancloutier]

If there is no performance improvement, I won't worry too much about it then!

[dai-shi]

If you are interested, feel free to check out the source code. It basically does jobs on top of the original subscribe.

[dpyzo0o]

Btw, I generally suggest to avoid subscribeWithSelector for new projects (it's meant for migration). It doesn't give any performance improvement and typing is really hard.

What do you mean by saying "It doesn't give any performance improvement" ? It will skip running the listener if the selected value does not change. I think this will improve performance. Am I missing sth?

[dai-shi]

Yeah, I'd admit the lack of my words.
It means you can do the same thing on your end without middleware, very easily, without any pitfalls.

let prevSlice;
const selector = (state) => ...;
useFooStore.subscribe((nextValue) => {
  const nextSlice = selector(nextValue);
  if (prevSlice !== nextSlice) {
    // do things
    prevSlice = nextSlice;
  }
});

[dpyzo0o]

Yes that would also work but it requires more boilerplates, so I think subscribeWithSelector is still worth using

[dai-shi]

For typing a vanilla store correctly with middleware, you probably need createVanilla()(...).