How to mix "Practice with no store actions" with "Initialize state with props"?

[pabloruizetc]

I would like to define actions at module level, external to the store (docs). But if I initialize a store with props within a context provider (docs) I can't access the scope to define those module level actions.

Is there a way to do that?

[dbritto-dev]

@pabloruizetc would you mind sharing us a codesandbox demo?

[pabloruizetc]

I don't know exactly what to show cause I don't know how to do it. What I would like is to initialize a store with props like that:

import { createStore } from 'zustand'

interface BearProps {
  bears: number
}

interface BearState extends BearProps {
  inc: () => void
}

const createBearStore = (initProps: BearProps) => {
  return createStore<BearState>()((set) => ({
    ...initProps,
    inc: () => set((state) => ({ bears: ++state.bears })),
  }))
}

but instead, define actions at module level like that:

export const inc = () =>
  useBearStore.setState((state) => ({ bears: ++state.bears }))

the problem is that the createBearStore function will be called within a React component and used in a Context.

[dbritto-dev]

@pabloruizetc got it, yeah you can't use it outside of react

[kenas4idps]

Well I was checking the docs on zustand for nextjs setup here.
And I thought it would be great if we can also do no store actions inside nextjs.
Currently it said "optional to use Context" does this means I can use the normal create() instead of createStore() and passing it into React.Context?

[dbritto-dev]

@kenas4idps no, that's just pointing out that global stores doesn't need to use a Context, but in Next.js you shouldn't use global stores.

Important

We have these general recommendations for the appropriate use of Zustand:

• No global stores - Because the store should not be shared across requests, it should not be defined as a global variable. Instead, the store should be created per request.
• React Server Components should not read from or write to the store - RSCs cannot use hooks or context. They aren't meant to be stateful. Having an RSC read from or write values to a global store violates the architecture of Next.js.

[kenas4idps]

Understand @dbritto-dev thank you for the clarity