How do I subscribe to a store in Nextjs when store is wrapped in a React Context.

[KamaniBhavin]

I've implemented a React context provider shown below on my Next.js 14 app. It wraps my app to ensure that the store initializes with each client request, rather than persisting as a global store between server requests. While I understand it's not recommended practice, I'm experimenting with multiple stores.

However, I'm facing a challenge in using .subscribe from one store to another. I attempted to utilize useStore() as defined below, but it doesn't include a subscribe method, and I couldn't find any examples or explanations in the documentation.

"use client";

import { StoreApi, useStore } from "zustand";
import { createStore, IStore } from "@/stores/store";
import { createContext, ReactNode, useContext, useRef } from "react";

const StoreContext = createContext<StoreApi<IStore> | null>(null);

type StoreProviderProps = Readonly<{
  children: ReactNode;
}>;

export function StoreProvider({ children }: StoreProviderProps) {
  const storeRef = useRef<StoreApi<IStore>>();

  if (!storeRef.current) {
    storeRef.current = createStore();
  }

  return (
    <StoreContext.Provider value={storeRef.current}>
      {children}
    </StoreContext.Provider>
  );
}

export function useStore(): IStore {
  const storeContext = useContext(StoreContext);

  if (!storeContext) {
    throw new Error(`useStore must be used within StoreProvider`);
  }

  return useStore(storeContext, selector)
}

export function useStore<T>(selector: (store: IStore) => T): T {
  const storeContext = useContext(StoreContext);

  if (!storeContext) {
    throw new Error(`useStore must be used within StoreProvider`);
  }

  return useStore(storeContext, selector)
}

Any guidance or examples on how to accomplish this would be greatly appreciated. Thank you!

[dbritto-dev]

@KamaniBhavin here you go:

export function useStore<T = IStore, U = T>(selector: (state: T) => U): [U, StoreApi<T>] {
  const store = useContext(StoreContext);

  if (store === undefined) {
    throw new Error(`useStore must be used within StoreProvider`);
  }

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

[KamaniBhavin]

@dbritto-dev How do I use subscribe with selector when using React Context Providers? This is a bit confusing as I believe store API does not expose a subscribe method with selector function.

[dbritto-dev]

@KamaniBhavin store API does expose subscribe and due tosubscribeWithSelector is a middleware you can use it without any problem. Keep me in the loop.

[KamaniBhavin]

I apologize for the confusion, @dbritto-dev. My issue wasn't explained clearly before. I intended to say that while the StoreApi does provide a subscribe method that functions correctly, I prefer to use subscribeWithSelector. This method allows subscribing to specific parts of the store rather than the entire store. However, when using the middleware, subscribeWithSelectorthe subscribe method with a selector callback isn't exposed.

import { createStore as createZustandStore } from "zustand/vanilla";
import { persist, subscribeWithSelector } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
import React, { createContext, useContext, useRef } from "react";
import { StoreApi, useStore as useZustandStore } from "zustand";
import { Store } from "../../../../../IdeaProjects/pitch-black-ui/src/stores/auth-store";

// store.ts
export function createStore() {
  return createZustandStore<IStore>()(
    subscribeWithSelector(
      persist(
        immer((set, get) => ({})),
        {
          name: "auth-store",
        }
      )
    )
  );
};

// provider.tsx
const StoreContext = createContext<StoreApi<IStore> | null>(null);

type Props = Readonly<{
  children: React.ReactNode;
}>;

export function StoreProvider({ children }: Props) {
  const storeRef = useRef<StoreApi<IStore>>();

  if (!storeRef.current) {
    storeRef.current = createStore();
  }

  return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
}

export function useStore<T>(selector: (store: IStore) => T): [T, StoreApi<IStore>] {
  const storeContext = useContext(StoreContext);

  if (!storeContext) {
    throw new Error(`useStore must be used within StoreProvider`);
  }

  return [useZustandStore(storeContext, selector), storeContext];
}

// page.tsx
export default function Page() {
  const [_, store] = useStore();
  store.subscribe(); // <--- still lacks a method with a selector although I used the middleware `subscribeWithSelector`
  // current signature of subscribe is `subscribe: (listener: (state: T, prevState: T) => void) => () => void;`
  
  return <></>
}

I would appreciate if you could provide me with an example or point me in right direction.

[dbritto-dev]

@KamaniBhavin in order to get the right type, you should use the type returned by your creator function

const StoreContext = createContext<ReturnType<createStore> | null>(null);

Same for useRef

[KamaniBhavin]

@dbritto-dev Works perfectly 🙌. I hadn't considered that the issue might just be the return type. Thanks for the help!