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
}

[ritvij14]

I will have a look but most probably I will do the slices pattern, because we already have the project size too big right now to change the library. plus everyone is comfortable with zustand.

One more follow up doubt, in slices pattern, can one slice receive data from context and another has default data? or is it more like the complete app state is made with a context, and then slices are just added into it, and in the provider's code you would mention what fields are getting assigned from data that gets fetched?

Also, if I do use a context provider along with slicing pattern, then that would mean if my NextJS app is client side mostly, I can use the same state across multiple routes, with the just the main parent layout.tsx having a provider wrapped around the children?

[dbritto-dev]

I will have a look but most probably I will do the slices pattern, because we already have the project size too big right now to change the library. plus everyone is comfortable with zustand.

One more follow up doubt, in slices pattern, can one slice receive data from context and another has default data? or is it more like the complete app state is made with a context, and then slices are just added into it, and in the provider's code you would mention what fields are getting assigned from data that gets fetched?

Also, if I do use a context provider along with slicing pattern, then that would mean if my NextJS app is client side mostly, I can use the same state across multiple routes, with the just the main parent layout.tsx having a provider wrapped around the children?

The context provider shared the whole state so there's no way to only pass down data for one slice unless you use a complex logic using more context providers one for each slice and one for the whole state.

By default zustand use shallow merge so everything will be working fine, any fetched data will be updated as is was before when you got two stores.

About Nextjs the needs of a context provider doesn't change and follows the same rules, context provider only returns the whole state and not the slices

[ritvij14]

@dbritto-dev thanks for the clarification

Regarding the last point, I meant to reference to the fact where Zustand stores rest when routes change.

So my doubt is, if I have multiple routes in my nextJS app, and the main layout.tsx has the contextProvider of the store, that has all the slices, then would I be able to use the complete state across multiple routes, without worrying about it getting reset, right?

Sorry if this is repetitive, but I just wanted to make sure that my information and understanding is correct.

[dbritto-dev-seatpick]

@dbritto-dev thanks for the clarification

Regarding the last point, I meant to reference to the fact where Zustand stores rest when routes change.

So my doubt is, if I have multiple routes in my nextJS app, and the main layout.tsx has the contextProvider of the store, that has all the slices, then would I be able to use the complete state across multiple routes, without worrying about it getting reset, right?

Sorry if this is repetitive, but I just wanted to make sure that my information and understanding is correct.

Yes, but remember the state is created for each request so any time you do a hard reload or open a new tab that's a new state

[ritvij14]

ok I get it now, thanks a lot!