Toast on success w/ server action + useActionState()

[kevinmitch14]

Summary

Recommended way to achieve the following while using useActionState() and server actions?

React.useEffect()?

<form
  onSubmit={() => {
    try {
      await doThing();
      toast.success("Done");
    } catch (error) {
      toast.success("Failed");
    }
  }}
>
  <input name="name" />
</form>;

Additional information

No response

Example

No response

[icopp]

I would have said to use something like useActionState with a state object updated to have a property like success: true and use that to trigger useEffect... but that doesn't work with redirects, from which useActionState will return the same state value as before.

[takayums]

I use return state.data, which represents the data successfully sent to the api/server. if state.data is returned successfully it will
display a toast.

// client components
"use client";

import React, { useActionState, useEffect } from "react";
import { toast } from "sonner";
import { categoryAction } from "@/actions/action-category";

export default function FormCategory() {
  const [state, action, pending] = useActionState(categoryAction, undefined);

  useEffect(() => {
    if (state?.data) {
      toast.success("Data Sent Successfully");
    }
  }, [state?.data]);

  return (
    <form action={action} className="space-y-3">
      <label className="form-control w-full max-w-xs">
        <div className="label ">
          <span className="label-text text-lg">Name Category</span>
        </div>
        <input
          type="text"
          placeholder="Type here"
          name="name"
          className="input input-bordered w-full max-w-xs"
        />
      </label>
      {state?.errors?.name && (
        <p className="text-sm text-error">{state.errors.name}</p>
      )}
      <label className="form-control w-full max-w-xs">
        <div className="label ">
          <span className="label-text text-lg">Description Category</span>
        </div>
        <textarea
          name="description"
          className="textarea text-base textarea-bordered h-24"
          placeholder="Bio"
        ></textarea>
      </label>
      {state?.errors?.description && (
        <p className="text-sm text-error">{state.errors.description}</p>
      )}
      <button type="submit" className="btn btn-primary">
        {pending && (
          <span className="loading loading-spinner loading-xs"></span>
        )}
        Submit
      </button>
    </form>
  );
}

// server action
"use server";

import { categoryFormSchema, FormState } from "@/libs/utils";

export async function categoryAction(state: FormState, formData: FormData) {
  const validatedFields = categoryFormSchema.safeParse({
    name: formData.get("name"),
    description: formData.get("description"),
  });

  // If any form fields are invalid, return early
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  const { name, description } = validatedFields.data;

  try {
    const category = await fetch(`${process.env.LOCALHOST}/api/category`, {
      method: "POST",
      headers: { "Content-type": "application/json" },
      body: JSON.stringify({ name, description }),
    });
    const data = await category.json();
    return data;
  } catch (error) {
    console.log(error);
  }
}

[Taloqq]

Yeah.. anybody know how can I run a client side function after successful server action, if useActionState doesnt return anything different on success?

[rwieruch]

You mean how you can re-run it? I had to introduce a timestamp to differentiate a returned action state from the next action state. This is how it is usually done with useEffect.

[lacymorrow]

Here is my personal example, with zod client/server validation, loading state, and error/success toasts (reset the form here if you want):

shadcn-ui/ui#5332 (comment)

[rwieruch]

There are two ways to achieve it:

• callback functions (recommended)
• useEffect

If no useActionState is used, you can just await the promise.

[yns01]

However, simply displaying the toast inside useEffect is not reliable. If the component re-renders, it might show an old toast message even if no new action was triggered. To prevent duplicate toasts, we use the timestamp to track when the state was last updated:

@rwieruch Could you elaborate? I tried to reproduce by adding a button which calls setState in the same form to force render but it does not seem to trigger the useEffect.

  const [state, formAction, isPending] = useActionState(updateInvoiceWithId, undefined)


  useEffect(() => {
    if (state && state.message === 'ok') {
      // show toaster
    }
  }, [state])
  
  

[yns01]

I don't think useActionState will return a new object between re-renders (which would trigger the useEffect)
without actually calling the action. And if we're calling the action, then it makes sense that the effect runs. Am I missing something?

[waynnbz]

There are two ways to achieve it:

• callback functions (recommended)
• useEffect

If no useActionState is used, you can just await the promise.

Thanks for sharing, @rwieruch!

I implemented a simpler callback version based on ur guide, with useActionState + toast.promise API.
Sharing it here as well!

// Create a callback function wrapping target server action
export const withToast = <Args extends unknown[], T extends void>(
  fn: (...args: Args) => Promise<T>,
) => {
  return async (...args: Args) => {
    const promise = fn(...args);

    toast.promise(promise, {
      loading: "Loading...",
      success: "Success",
      error: "Error",
    });

    return promise;
  };
};

// Usage
"use client"
export default function ClientComponent() {
  const [state, formAction, isPending] = useActionState(withToast(action), null);

  return (...

[rwieruch]

@waynnbz looks good and this works too! In my case I wanted to have the clear separation between callback HoF (multi purpose usage) and toast usage. You merged both of them which makes it simpler, that's fine :)

[internetdrew]

There seem to be lots of confusing ways to do this, but I found this to be the simplest approach:

Following the docs, you'll want to have an initial state:

export const initialState = {
  message: '',
  success: false,
};

And normally, you'd likely just inline your action like this:

  const [state, action, pending] = useActionState(categoryAction, formData);

But useActionState is expecting it's first parameter to return a promise that resolves to the same type as the initial state.

But when you want a client-side action to run, you likely want it to happen:

1. After the server action has run and
2. Before the state of that action is returned

So the simplest way to do that is to create a wrapper function that captures the return from the server action, perform your client-side interaction, then return the result:

So your code looks more like this:

const [state, formAction] = useActionState(
    async (_state: typeof initialState, formData: FormData) => {
      const result = await categoryAction(formData);
      if (result?.success) {
        yourClientSideFn()
      }
      return result;
    },
    initialState
  );

as long as your categoryAction is returning the same type as you initialState, you should be good to go. So on a successful action, you return something like return { message: 'Category whatever'd successfully', success: true };

I hope I understood what you asked and this helps.

[rwieruch]

Yes, wrapping the action ourselves to await the promise before passing it to useActionState is one option to implement it. I have documented this as well over here.

[Tasfin660]

so I tried a lot of code and that's my solution, i am not using useActionState but this code works fine

function SubmitButton() {
    const { pending } = useFormStatus()

    return (
        <Button disabled={pending}>
            { pending ?  'Adding...' : 'Add Todo' }
        </Button>
    )
}


export default function AddTodo() {
    async function handleSubmit(formData: FormData) {
        const { success, message } = await createTodo(formData)

        if (success) toast.success(message)
        else toast.error(message)
    }

    return (
        <form action={handleSubmit} className="...">
            {...}
            <SubmitButton />
        </form>
    )
}

[rwieruch]

Yes, awaiting the promise from the action works when not using useActionState.