is it ok to use `action()` to handle form submission in a SPA?

my idea is to handle form submission as follow:

  ...
  
  const submit = action(async (formData: FormData) => {
    const values = Object.fromEntries(formData.entries());
    const parsing = projectSchema.safeParse(values);

    if (!parsing.success) return parsing.error.flatten();

    searchParams.id
      ? update.mutate({ ...parsing.data, id: searchParams.id })
      : create.mutate(parsing.data);
  });

  const submission = useSubmission(submit);

  return (
    <Stack>
      <h1 class="h1">Project</h1>
      <form method="post" action={submit} class={stack()}>
        <Input
          name="name"
          label="Projektbezeichnung"
          value={project.data?.name}
          error={submission.result?.fieldErrors?.name}
        />

  ...
  
  const submit = action(async (formData: FormData) => {
    const values = Object.fromEntries(formData.entries());
    const parsing = projectSchema.safeParse(values);

    if (!parsing.success) return parsing.error.flatten();

    searchParams.id
      ? update.mutate({ ...parsing.data, id: searchParams.id })
      : create.mutate(parsing.data);
  });

  const submission = useSubmission(submit);

  return (
    <Stack>
      <h1 class="h1">Project</h1>
      <form method="post" action={submit} class={stack()}>
        <Input
          name="name"
          label="Projektbezeichnung"
          value={project.data?.name}
          error={submission.result?.fieldErrors?.name}
        />

but i'm wondering if there is a side effect i'm unaware of when in SPA mode 🤔 i believe actions were created for the SSR world, but perhaps i'm wrong and this usage is fine.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

is it ok to use `action()` to handle form submission in a SPA?