Ideas to update values inside a store with NextJS's revalidatePath in servers actions

[dudusotero]

I'm building a Cart page in a random project that calls from the page level getCart function.

Inside this server page, I wrap my components in a client component that is a wrapper for a context created with React, to share these received props across all child components through a compound pattern, to avoid prop drilling in my case.
With this context alone, the revalidatePath function is being able to trigger updates to my context, and the UI is rendered with new data.

But, when I try with Zustand's createStore + this context approach, the revalidation doesn't trigger the data changes, probably due to being a store that was created on the server and the initial props were the first call for getCart async function.

So, my question is: What will be a good approach to use to combine this data update with my current created store?
Any ideas or similar examples that already implemented this behavior?

[mooalot]

If I understand correctly, it sounds like you are creating a store in a context and want that store to update when some data changes.

I always do something like this in my provider:

type Data = {
  foo: string;
};

const StoreContext = createContext<StoreApi<Data> | null>(null);
function createDataStore(value: Data) {
  return createStore<Data>((set) => ({
    ...value,
  }));
}

function DataStoreProvider({ children, value }: { children: React.ReactNode; value: Data }) {
  const [store] = useState(() => createDataStore(value));

  //if any props change, it will update the store
  useEffect(() => {
    store.setState(value);
  }, [value]);

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

function useDataStore(selector: (store: Data) => any) {
  const store = useContext(StoreContext) as StoreApi<Data> | null;

  if (!store) {
    throw new Error('useDataStore must be used within a StoreProvider');
  }

  return useStore(store, selector);
}

[dudusotero]

amazing solution sir, I will try on my end.

[dudusotero]

Ended like this:

'use client';

import { useEffect, useRef } from 'react';
import {
  type CurrentCartZustandProps,
  type CurrentCartZustandStore,
  createCurrentCartZustandStore,
  CurrentCartZustandContext,
} from './context';

type CurrentCartZustandProviderProps =
  React.PropsWithChildren<CurrentCartZustandProps>;

export function CurrentCartZustandProvider({
  children,
  ...props
}: CurrentCartZustandProviderProps) {
  const storeRef = useRef<CurrentCartZustandStore>(null);

  if (!storeRef.current) {
    storeRef.current = createCurrentCartZustandStore(props);
  }

  useEffect(() => {
    if (storeRef.current) storeRef.current.setState(props);
  }, [props]);

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