Next.js Discord

Discord Forum

[TS] Need Help with useActionState

Answered
Lao Gan Ma posted this in #help-forum
Open in Discord
Lao Gan MaOP
How do you type your useActionState server actions?

If anyone have basic TS example snippet of using useActionState, that would be appreciated.

I seem to have difficulties in getting the right type of useActionState that I like to use useTransition more than useActionState.
Answered by Asian black bear
View full answer

15 Replies

Lao Gan MaOP
Server Action

"use server"

import { getRobots } from "@/app/lib/get-robots"
import { parseError } from "@/app/module/error/ErrorCard"

export async function getRobotsAction(state: undefined, payload: string) {
  try {
    const robots = await getRobots(payload)
    return { data: robots }
  } catch (e) {
    const error = parseError(e)
    return { error }
  }
}

export type GetRobotsActionPayload = string
export type GetRobotsActionState = Awaited<ReturnType<typeof getRobotsAction>> | undefined
export type GetRobotsAction = (state: GetRobotsActionState, payload: GetRobotsActionPayload) => Promise<GetRobotsActionState>




Client
  const [state, dispatch, pending] = useActionState<
    GetRobotsActionState,
    GetRobotsActionPayload
  >(getRobotsAction as GetRobotsAction, undefined)



This is what I have right now. Its a bit unintuitive but perhaps someone have a better Typescript Setup?
Asian black bear
Why do you want to type it in the first place?
The only thing that might be worth typing is the state and that's it.
Lao Gan MaOP
It gives an error if it's not type. Type inference sucks with useActionState :(
Asian black bear
useActionState will deduce the types from usage.
Lao Gan MaOP
Asian black bear
Answer
Lao Gan MaOP
thats why im wondering on how do you set it up correctly
WELL
Asian black bear
The state can't be undefined.
Lao Gan MaOP
switching undefined to unknown works HAHA
thats the correct type im looking for
export async function getRobotsAction(
  state: unknown,  
  // This needs to be `unknown` if you don't need previous state
  // and it can't be undefined
  payload: string
) { ... }
Thanks!