How to define actions at module level, external to the store when using Next.js store configurations?

[adam-ridhwan]

I am following this guide(Setup with Next.js) to set up Zustand on my Next.js application. My state and actions are getting kinda big and I am trying to extract my actions out of the store. I was trying to follow this guide(Practice with no store actions) but I could not get it to work. Any tips?

Here is my set up: -

1) Provider using context API

const BearStoreContext = createContext<StoreApi<BearStore> | null>(null);

export const BearProvider = ({ children, initialData }) => {
  const storeRef = useRef<StoreApi<BearStore>>();
  if (!storeRef.current) storeRef.current = createBearStore(initialData);

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

export const useBearStore = <T,>(selector: (store: BearStore) => T): T => {
  const store = useContext(BearStoreContext);
  if (!store) throw new Error(`useBearStore must be use within Provider`);
  return useStore(store, selector);
};

2) Store creator

export type BearStore = State & Actions;

export const createBearStore = (initialData) =>
  create<BearStore>(
    ...initialData,
    bears: 0
    incrementBearCount: () => set((state) => ({ bears: ++state.bears })),
    // ... other state and actions
  );

How can I extract incrementBearCount and put it outside of the store considering I followed the Next.js guide using context API?

export const createBearStore = (initialData) => {
 create<BearStore>
    ...initialData,
    // ... other state and actions
 )
};

export const incrementBearCount = (text) => {
    useBearStore.setState((state) => ({ bears: ++state.bears }));
}

[dai-shi]

Unfortunately, you can't define actions at module level with context.

You need something like this:

export const useBearStoreActions = () => {
  const store = useContext(BearStoreContext);
  if (!store) throw new Error(`useBearStore must be use within Provider`);
  return {
    incrementBearCount: store.getState().incrementBearCount,
  };
};

[karangarg45]

thanks for the response @dai-shi , does that mean that if someone would like to initialise the store with some initial values (currently only possible by using a context), it's not possible to have no-store actions?

[dbritto-dev]

@karangarg45 actually, it's possible but you need to pass the store to your store action.

incrementBearCount(bearStore)

The implementation would be something like this:

const incrementBearCount = store => {
  store.getState().incrementBearCount()
}