Typescript issue with Vanilla/Bound store while testing

[holgergp]

Hi all!
I am struggling to wrap my head around TypeScript types in the context of VanillaStore/Bound store.
My idea is to let test access a vanilla store, while components can use a bound store.

Following the docs I created the following

Create a vanilla store:

export const initialState = { foo: [] };
export const fooStore = createStore<FooState>((set, getState) => ({
  ...initialState,
  update: (a) => set((state) => ({ foo: [...state.foo, a] }))
}));

Create a hook to expose the vanilla store to the react component:

export const useBoundStore: UseBoundStore<StoreApi<FooState>> = (
  selector,
  equals
) => useStore(fooStore, selector, equals);

Now I receive a error coming from TypeScript, which I cannot get my head around:

Type '<U>(selector: (state: FooState) => U, equals: ((a: U, b: U) => boolean) | undefined) => U' is not assignable to type 'UseBoundStore<StoreApi<FooState>>'.
  Type '<U>(selector: (state: FooState) => U, equals: ((a: U, b: U) => boolean) | undefined) => U' is not assignable to type '{ (): FooState; <U>(selector: (state: FooState) => U, equals?: ((a: U, b: U) => boolean) | undefined): U; }'.

You can find a running example of this in this codesandbox: https://codesandbox.io/s/zustandvanillaslashboundstore-rrvitm?file=/src/MyStore.ts

What is going on there? What am I missing? Do I use the wrong types? Am I doing this too complicated/not idiomatic?

Any pointer is greatly appreciated!

Thanks for your awesome work!

Cheers from Düsseldorf

Holger

[dai-shi]

You don't need to use UseBoundStore type. It's for something else.

Just typing your function should work, like this:

export const useBoundStore = <T>(
  selector: (state: FooState) => T,
  equals?: (a: T, b: T) => boolean
) => useStore(fooStore, selector, equals);

@sewera @chrisk-7777 @dbritto-dev This would be a good one for docs if we don't have it yet.

[holgergp]

I was looking in the docs for this, but could not find it. I would agree that this might fit nicely in the docs.
If you folks haven't got time for this, I could (try to) make a doc PR for this.

[chrisk-7777]

I haven't had a look at the docs for this just yet, but more than happy for you to.
Please see this comment about running the docs locally: #1033 (reply in thread)

Once you're done I'm more than happy to have a look over. If you get stuck with local setup, or have any questions, just ping me on that other discussion thread (1033)

[holgergp]

Thank you!
I probably won't do it today. But I'll have a try tomorrow.

[churichard]

Hi @dai-shi - I'm trying to use this type, but it unfortunately doesn't support using the Persist middleware API (e.g. useBoundStore.persist.clearStorage(). Is there a way I can change the typing in order to support this?

[dai-shi]

I think you just can/should fooStore.persist.clearStorage. No need to attach the store api to the hook, and it's extremely tricky to type it.

[holgergp]

I have to reopen this again. While your answer works, there is a tiny issue for me left.
I can use your suggested bound store hook, if I provide a selector function.

export const useBoundStore = <T>(
  selector: (state: FooState) => T,
  equals?: (a: T, b: T) => boolean
) => useStore(fooStore, selector, equals);

If I want to use the hook without providing a selector function, I get
Expected 1-2 arguments, but got 0.ts(2554)

What I can do is provide a second hook, that does not require a selector, or provide a default in the useBoundStore-hook:

export const useBoundStore = <T>(
  selector: (state: FooState) => T = (state) => state as T,
  equals?: (a: T, b: T) => boolean
) => useStore(fooStore, selector, equals);

This does the job, but I get the feeling, that I assume too much of the inner workings of zustand.

Please have a look at the sample here: https://codesandbox.io/s/zustandvanillaslashboundstore-rrvitm?file=/src/MyStore.ts:367-538

What do you think @dai-shi @chrisk-7777?

Thank you!

[holgergp]

What about this (thinking about Ex2):

type BoundStoreSelector<U> = {
  (): U;
  <T>(selector: (state: U) => T, equals?: (a: T, b: T) => boolean): T;
};

export const useFooStoreEx2: BoundStoreSelector<FooState> = (
  selector?: any,
  equals?: any
) => useStore(fooStore, selector, equals) as any;

The BoundStoreSelector type could be something that is provided by zustand, to make it easier to consume for users.

[dai-shi]

We don't plan to provide types from the lib which user can create easily. This case falls into it.

[holgergp]

I have sandboxed all 4 (Ex0 - Ex3) examples:
https://codesandbox.io/s/zustandvanillaslashboundstore24012023-i2bgu3?file=/src/MyStore.ts

Definition in MyStore.ts, Usage in MyComponent.tsx

@chrisk-7777 @sewera @dbritto-dev

[chrisk-7777]

Took me a while to grok this conversation!
Thank you for providing the sandbox @holgergp , I've been working through the examples while following along in the convo.

Personally I'm leaning towards the overloaded approach, because I believe it most closely follows how Zustand defines useStore itself (https://github.com/pmndrs/zustand/blob/main/src/react.ts#L23)

I understand the downside of teaching what might be a foreign concept (function overloading), but as long as its a documented TS feature I think its appropriate from a documentation perspective to use. Otherwise it becomes a hard line to draw - what TS is considered too advanced and what isn't?

Even if we include a link to the TS docs - something simple like:

"Not familiar with this pattern? Checkout the TS docs on function overloading"

Outside of the teaching side of things, are there any other pitfalls for using the overloaded approach?

[holgergp]

Thanks @chrisk-7777!
I would be fine with the overloading solution. Besides that it is a little wordy, I see no other problems with that.
I"ll add that to #1565

[holgergp]

I have tried to do a PR:
#1565
@dai-shi @chrisk-7777

[holgergp]

Thanks @dai-shi and @chrisk-7777 for your time, great answers and this outcome! 💪

[dannobytes]

Related to this discussion, I was trying to follow documentation on creating an abstract createBoundedUseStore generator b/c I have a need to create bounded store hooks in a more scalable way.

However, the generated bounded hook in the example doesn't get typed correctly.

const createBoundedUseStore = ((store) => (selector, equals) =>
  useStore(store, selector as any, equals)) as <S extends StoreApi<unknown>>(
  store: S
) => {
  (): ExtractState<S>
  <T>(
    selector?: (state: ExtractState<S>) => T,
    equals?: (a: T, b: T) => boolean
  ): T
}

type ExtractState<S> = S extends { get: () => infer X } ? X : never

Has anyone actually gotten this to work as expected? It seems like ExtractState<S> and its infer X type is not working as intended.

[dannobytes]

Oh, I think I just fixed the issue. The store's type is trying to be extracted and inferred from StoreApi.get(). However, this function is wrong and doesn't exist on StoreApi. The current interface exposes getState: () => T instead.

So I'm guessing the docs were either typo'ed and mistaken. Or, StoreApi.get was an older interface that was later migrated to StoreApi.getState.

For anyone else out there trying to create an abstract bounded use store hook generator, the fix is to replace get with getState in ExtractState.

type ExtractState<S> = S extends { getState: () => infer X } ? X : never;

[sewera]

Hi, thanks for spotting the issue! Do you mind contributing to the docs, so that they're up-to-date?

You can find all the necessary info on how to do it in CONTRIBUTING.md :)

[dannobytes]

You're welcome! And happy to push up a PR to update the docs. I'll get that up today and link to this thread for reference

[dannobytes]

#1779

[dannobytes]

Ran into one more snag here. When memoizing selectors with custom bound hook, I noticed the selector doesn't get typed properly.

For example:

const memoizedStuff = useMyStore(useCallback(s => s.getStuff(), []));

// const memoizedStuff: any

Any ideas on how to fix the useBoundStore types to have this working?

[dannobytes]

Solved. The issue was that the overloaded return functions from createBoundedUseStore had marked the first selector as optional. Removing the ? solved the lost type inference in the memoized callback selector.

Here's the fully fixed version of the abstract bounded store hook generator:

const createBoundedUseStore = (store => (selector, equals) => useStore(store, selector as never, equals)) as <
  S extends StoreApi<unknown>
>(
  store: S
) => {
  (): ExtractState<S>;
  <U>(selector: (state: ExtractState<S>) => U, equals?: (a: U, b: U) => boolean): U;
};

type ExtractState<S> = S extends { getState: () => infer T } ? T : never;