🍿 Minor Changes
-
#11071
8ca7c73Thanks @bholmesdev! - Adds two new functionsexperimental_getActionState()andexperimental_withState()to support the React 19useActionState()hook when using Astro Actions. This introduces progressive enhancement when calling an Action with thewithState()utility.This example calls a
likeaction that accepts apostIdand returns the number of likes. Pass this action to theexperimental_withState()function to apply progressive enhancement info, and apply touseActionState()to track the result:import { actions } from 'astro:actions';import { experimental_withState } from '@astrojs/react/actions';export function Like({ postId }: { postId: string }) {const [state, action, pending] = useActionState(experimental_withState(actions.like),0 // initial likes);return (<form action={action}><input type="hidden" name="postId" value={postId} /><button disabled={pending}>{state} ❤️</button></form>);}You can also access the state stored by
useActionState()from your actionhandler. Callexperimental_getActionState()with the API context, and optionally apply a type to the result:import { defineAction, z } from 'astro:actions';import { experimental_getActionState } from '@astrojs/react/actions';export const server = {like: defineAction({input: z.object({postId: z.string(),}),handler: async ({ postId }, ctx) => {const currentLikes = experimental_getActionState<number>(ctx);// write to databasereturn currentLikes + 1;},}),};