Access store state via .getState() when using store context via useStore/useStoreWithEqualityFn

[MeanMangosteen]

When creating a vanilla store like so the getState() method exists on the store:

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}));

useStore.getState() // Exists

However I am using Next.js app router and using the setup guide for SSR'ing, where you end up accessing the store like:

export const useCounterStore = <T,>(
  selector: (store: CounterStore) => T,
): T => {
  const counterStoreContext = useContext(CounterStoreContext)

  if (!counterStoreContext) {
    throw new Error(`useCounterStore must be used within CounterStoreProvider`)
  }

  return useStore(counterStoreContext, selector)
}

However for useCounterStore no longer had the getState() method. Is there a way to do this?

Motivation for this is that I'm trying to imperatively get the store state once in a method without having to subscribe to updates/use a hook.

[MeanMangosteen]

Does the fact we use a context here mean that it's inherently not possible to do this?

[dai-shi]

counterStoreContext has getState.

export const useCounterStoreApi = () => {
  const counterStoreContext = useContext(CounterStoreContext)

  if (!counterStoreContext) {
    throw new Error(`useCounterStore must be used within CounterStoreProvider`)
  }

  return counterStoreContext
}

[dbritto-dev]

@MeanMangosteen yes, you can't use hooks outside of react

[dbritto-dev]

@MeanMangosteen if you want to use zustand outside of react you need to use createStore

[MeanMangosteen]

Right. Yes I am using createStore but providing the resultant store via a context to have a 'store per request' as recommended by the docs.

I take it, it's not possible to use getState() if using this pattern for usage with nextjs. Regardless thanks for your responses and your efforts on the library!

[dbritto-dev]

@MeanMangosteen this should be enough

const useCounterStore = <T,>(
  selector: (state: CounterStore) => T,
) => {
  const storeApi = useContext(CounterStoreContext)

  if (storeApi === undefined) {
    throw new Error(`useCounterStore must be used within CounterStoreProvider`)
  }

  return [useStore(storeApi, selector), storeApi]
}

const Component = () => {
  const [state, storeApi] = useCounterStore()
  
  useEffect(() => {
    console.log(storeApi.getState())
  }, [])
  
  ...
}

[dbritto-dev]

@MeanMangosteen what you are setting outside of react context?