auto generating selectors for nextjs store implementation

[gutisalex]

hey, I followed along on how to create stores for nextjs and then I found your howto for autogenerating selectors... first off is that possible to have that, too?

When I started to implement the function I already get an error inside the createSelectors function on useStore:

React Hook "useStore" is called in function "(store.use as any)[k]" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

[vincedsb1]

Hey @gutisalex,

The error you're encountering is due to calling the useStore hook inside a function that is not a React component or a custom hook. In React, hooks like useStore must be called directly inside functional components or other custom hooks.

To resolve this issue, you should refactor your code to ensure that the useStore hook is only called within React components or custom hooks. Avoid calling hooks inside regular functions or loops.

If you need to access store values outside of components, consider using the useShallow hook or restructuring your code to encapsulate the logic within a custom hook that can be used in components.

Here's an example of how you can structure your code to use the useShallow hook:

import { useShallow } from 'zustand';

const useCustomHook = () => {
  const store = useShallow(storeSelector);
  return store;
};

const MyComponent = () => {
  const store = useCustomHook();

  // Use store values here

  return <div>My Component</div>;
};

By following this pattern, you can ensure that hooks are used correctly within your Next.js application.

Hope this helps! If it solves your issue, could you please mark this comment as the answer? It helps others find the solution faster. 🙏