Duplicate store for different routes

[jonshutt]

I'm working on an app where there are various dashboard pages. We use react router for the page routes, and the number of dashboard is dynamic.

Each dashboard is pretty much the same, and ideally we want a Store for each dashboard which persists the state of that page when people switch between the pages.

I've got it working by combining with React Context (code extract below) but, maybe due to using React Context - every component re-renders any time any value changes - and I can't seem to select values separately.

Apart from the re-render issue, it works, but I'm not sure if there's way to fix is, or if I need to find a solution that doesn't rely on React Context. If so - any pointers on the best way to dynamically create stores for each routed page?

\\ store
import { ReactNode, createContext, useContext } from 'react';
import { createStore, useStore } from 'zustand';
import { persist } from 'zustand/middleware';

interface DashboardStoreState {
  zoom: number;
}
interface DashboardStoreActions {
  setZoom: (zoom: number) => void;
}
const initialState: DashboardStoreState = {
  zoom: 7,
};
const createMyStore = (path: string) =>
  createStore<DashboardStoreState & DashboardStoreActions>()(
    persist(
      (set) => ({
        ...initialState,
        setZoom: (zoom) => set({ zoom }),
      }),
      { name: `dashboardStore${path}` },
    ),
  );
const DashboardContext = createContext<ReturnType<typeof createMyStore> | null>(null);
export const DashboardContextProvider = ({
  children,
  storeName,
}: {
  children: ReactNode;
  storeName: string;
}) => {
  const store = createMyStore(storeName);
  return <DashboardContext.Provider value={store}>{children}</DashboardContext.Provider>;
};
export const useDashboardStore = () => {
  const store = useContext(DashboardContext);
  if (store === null) {
    throw new Error('no provider');
  }
  return useStore(store);
};

\\ Map Page
const { zoom, setZoom } = useDashboardStore();

\\ component wrapped in provider
<DashboardContextProvider storeName={dashboardPath}>
       <MapPage />
</DashboardContextProvider>

[dbritto-dev]

@jonshutt let me create a demo for you

[dbritto-dev]

@jonshutt here you go -> https://codesandbox.io/p/sandbox/dazzling-dawn-9kyp45?file=%2Fsrc%2Fstores%2Fuse-counter-store.ts%3A20%2C12

[jonshutt]

@dbritto-dev Brilliant - that's really helped. Got it added to our app, and it's working almost perfectly.

Has a small issue with types -
getUseCounterStore(path)(state => state.count);
resulted in Parameter 'state' implicitly has an 'any' type.

In the store I typed the map
const counterStores= new Map<string, UseBoundStore<StoreApi<CounterStore>> >();

But there seems to be an issue the map.get() returns TYPE | undefined - which the react component doesn't like...
So, I created a default store, then return the store only if it exists, and if not, return a default store (which likely won't be used)

const defaultStore = create<CounterStore>()((set) => ({
          count: 0,
          inc: () => {
            set((state) => ({ count: state.count + 1 }));
          },
        }))

 if (counterStores.has(key)) {
        const store = counterStores.get(key)
        if (store) return store
    }

    return defaultStore

[dbritto-dev]

@jonshutt I updated the example to add types, please take a look of that

[joeyfigaro]

Was this moved elsewhere? The sandbox no longer seems to exist.