Store is not callable as a hook in react

[ShravanSunder]

A follow up to #1113 I'm using the commit based package mentioned there.

@dai-shi I'm getting an error where the hook created by createStore isn't callable. It doesn't seem to be a function when i try to use it in a react funtion.

This expression is not callable.
  Type 'Write<WithDevtools<StoreApi<IEthersAppStore>>, StorePersist<IEthersAppStore, IEthersAppStore>>' has no call signatures.ts(2349)

import { createStore } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

import { IBlockNumberState } from '~~/context/EthersAppState';

interface IEthersAppStore {
  blockNumberStore: IBlockNumberState;
}

type TSetStoreFunc =
  | IEthersAppStore
  | Partial<IEthersAppStore>
  | ((state: IEthersAppStore) => IEthersAppStore | Partial<IEthersAppStore>);

const setBlockNumber = (chainId: number, blocknumber: number): TSetStoreFunc => {
  return (state): IEthersAppStore => {
    state.blockNumberStore[chainId] = blocknumber;
    return state;
  };
};
export const useEthersAppStore = createStore<IEthersAppStore>()(
  devtools(
    persist((set) => ({
      blockNumberStore: {},
      setBlockNumber: (blocknumber: number, chainId: number): void => set(setBlockNumber(chainId, blocknumber)),
    }))
  )
);


export const useBlockNumberContext = (): number => {
  const store = useEthersAppStore();
  // if (blockNumber == null) {
  //  console.log('blockNumber context is null');
  // }
  // invariant(blockNumber != null, 'useBlockNumberContext needs to be used under BlockNumberContext');
  return blockNumber ?? 0;
};

[ShravanSunder]

i'm using the curried example from typescript

[dai-shi]

Yeah, createStore creates a vanilla store, which must be used with useStore.

Please use create from the default export.

import create from 'zustand'

I know people (and IDEs) get confused with new APIs.

[ShravanSunder]

@dai-shi thank you so much for the explanation. maybe you can move this to discussion to make it available to others?

[muhammadyusuf-kurbonov]

Update:

import { create } from "zustand";

zustand v5.0.8

default export doesn't exists