feat(ex): Like with useActionState

packages/astro/e2e/fixtures/actions-blog/src/actions/index.ts

@@ -5,8 +5,10 @@ import { getCollection } from 'astro:content';
 export const server = {
 	blog: {
 		like: defineAction({
-			input: z.object({ postId: z.string() }),
-			handler: async ({ postId }) => {
+			accept: 'form',
+			input: z.object({ postId: z.string(), state: z.string().transform(t => JSON.parse(t)) }),
+			handler: async ({ postId, state }) => {
+				console.log('state', state);
 				await new Promise((r) => setTimeout(r, 200));
 
 				const { likes } = await db

packages/astro/e2e/fixtures/actions-blog/src/components/Like.tsx

@@ -1,22 +1,23 @@
 import { actions } from 'astro:actions';
-import { useState } from 'react';
+import { useActionState } from 'react';
+import { withState } from '@astrojs/react/actions';
 
 export function Like({ postId, initial }: { postId: string; initial: number }) {
-	const [likes, setLikes] = useState(initial);
-	const [pending, setPending] = useState(false);
+	const [state, action, pending] = useActionState(
+		withState(actions.blog.like),
+		initial,
+	);
 
 	return (
+		<form action={action}>
+			<input type="hidden" name="postId" value={postId} />
 		<button
 			aria-label="Like"
 			disabled={pending}
-			onClick={async () => {
-				setPending(true);
-				setLikes(await actions.blog.like({ postId }));
-				setPending(false);
-			}}
 			type="submit"
 		>
-			{likes} ❤️
+			{state} ❤️
 		</button>
+		</form>
 	);
 }