How can I use subscribeWithSelector with createStore?

[ritvij14]

I have a webapp where I am fetching data on server side and then using this guide: https://docs.pmnd.rs/zustand/guides/nextjs

I have the flow as this: user opens the webapp, data gets fetched on server side, then data is send to context, on client side the data is set into the zustand state as part of the context provider component.

But when I use zustand state in this case I use it with createStore. So how can I use subscribeWithSelector or use selectors in the subscribe function?

[AshotN]

@ritvij14 were you able to find a solution?

[dbritto-dev]

@ritvij14 @AshotN here you go:

Let's modify the example from nextjs guide:

export const createCounterStore = (
  initState: CounterState = defaultInitState
) => {
  return createStore<CounterStore>()(
    subscribeWithSelector((set) => ({
      ...initState,
      decrementCount: () => set((state) => ({ count: state.count - 1 })),
      incrementCount: () => set((state) => ({ count: state.count + 1 })),
    }))
  )
}

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

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

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

Now, you can use it like this:

const Component = () => {
  const [count, api] = useCounterStore((state) => state.count)
  
  useEffect(() => {
    const unsubscribe = api.subscribe((state) => state.count, console.log, {
      fireImmediately: true,
    })

   return () => {
     unsubscribe()
   }
  }, [api])
  
  ...
}

[AshotN]

Thank you. I had figured out the implementation, but had missed the unsubscribe. Thanks