Theo's Typesafe Cult•6mo ago

How to use state management (Zustand) but still make use of "use server"

<div className="flex flex-col p-2">
  <form
    action={async () => {
      "use server";

      await deleteImage(idAsNumber);
    }}
  >
    <Button type="submit" variant="destructive">
      Delete
    </Button>
  </form>
</div>

<div className="flex flex-col p-2">
  <form
    action={async () => {
      "use server";

      await deleteImage(idAsNumber);
    }}
  >
    <Button type="submit" variant="destructive">
      Delete
    </Button>
  </form>
</div>

As you can see, from Theo's latest tutorial, we do "use server" inside of the action component of the form. I'm trying to expand the app and so I wanted to use Zustand for state management to track some other data on this 'full-image-page.tsx' but I'm unable to since that requires it to be a client component. Client components cannot have server components inside of them. The error I get when I add my Zustand logic is: Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. But if I were to add "use client" at the top of my file, Error: × It is not allowed to define inline "use server" annotated Server Actions in Client Components. My question is how would I be able to run the delete logic on the server without needing to embed a server component inside a client component. Thanks!

1 Reply

Huilen•6mo ago

hi you cant run zustand on the server you can pass an action to aform even if the form is use client try to create the server action on another file importing the function and then passing it

action.ts

'use server'

export function doSomething(){}

action.ts

'use server'

export function doSomething(){}

client-component.tsx

'use client'

import { doSomething } from './action.ts'

function MyForm(){
  return (
    <form action={doSomething}> </form>
  )
}

client-component.tsx

'use client'

import { doSomething } from './action.ts'

function MyForm(){
  return (
    <form action={doSomething}> </form>
  )
}

hi @io did it work?

Gaming

Programming

How to use state management (Zustand) but still make use of "use server"