I'm trying to improve my server actions to align with best practices. say i have a form that submits a server action which has a return of:return { success: true, message: 'Database has been updated!' };I know using useFormState i can get the return in the front end:{state?.message}or {state?.success && Operation was successful }say for instance i have a function that toggles a ui state: const toggleEditState = () => { setIsEditing(!isEditing); };how could i trigger that when i get a response of success: true? would i be better setting up a try/catch in my client form? thanks

Execute a function based on the response of a Server Action

Answered

Plott Hound posted this in #help-forum

Plott HoundOP

2024-01-16T13:25:36.000Z

I'm trying to improve my server actions to align with best practices. say i have a form that submits a server action which has a return of:
return { success: true, message: 'Database has been updated!' };
I know using useFormState i can get the return in the front end:
{state?.message}
or {state?.success && <p>Operation was successful</p>}

say for instance i have a function that toggles a ui state:

const toggleEditState = () => {
    setIsEditing(!isEditing);
};

how could i trigger that when i get a response of success: true? would i be better setting up a try/catch in my client form? thanks

Answered by Ray

you could do this if you are using useFormState

 useEffect(() => {
    if (state?.success) {
      toggleEditState()
    }
  }, [state])

View full answer

15 Replies

@Plott Hound I'm trying to improve my server actions to align with best practices. say i have a form that submits a server action which has a return of: `return { success: true, message: 'Database has been updated!' };` I know using `useFormState` i can get the return in the front end: `{state?.message}` or `{state?.success && <p>Operation was successful</p>}` say for instance i have a function that toggles a ui state: const toggleEditState = () => { setIsEditing(!isEditing); }; how could i trigger that when i get a response of `success: true`? would i be better setting up a try/catch in my client form? thanks

Ray

2024-01-16T13:30:29.000Z

you could do this if you are using useFormState

 useEffect(() => {
    if (state?.success) {
      toggleEditState()
    }
  }, [state])

Answer

Plott HoundOP

2024-01-16T13:31:33.000Z

thanks @Ray you really are the MVP. the only idea i had was useEffect so i'll go ahead and do that. i am indeed using useFormState

confirming that worked in my code

Plott HoundOP

2024-01-16T14:07:14.000Z

Sorry one last question @Ray this works when i only submit the form once and refresh, but if i need to submit the same form repeatedly (eg adding checklist items) without refreshing the page then the useEffect dependency will only update on the first response since the success state hasn't changed. the only way i can think to deal with this is to reset the state on successful form submission, the downside being that the useEffect will run again when i reset the state

@Plott Hound Sorry one last question <@743561772069421169> this works when i only submit the form once and refresh, but if i need to submit the same form repeatedly (eg adding checklist items) without refreshing the page then the useEffect dependency will only update on the first response since the success state hasn't changed. the only way i can think to deal with this is to reset the state on successful form submission, the downside being that the useEffect will run again when i reset the state

Ray

2024-01-16T14:08:37.000Z

this is the reason I use useState over useFormState as we cannot reset the state with useFormState

@Ray this is the reason I use `useState` over `useFormState` as we cannot reset the state with `useFormState`

Plott HoundOP

2024-01-16T14:09:22.000Z

yeah i read the docs for useFormState multiple times and you're right that it cant be reset. i'll try using normal state. thanks again!

although im considering submitting the data in a try catch and assemling the form data there so i have more control and could get rid of useEffect

Ray

2024-01-16T14:10:43.000Z

with useState you don't need useEffect

<form action={async (data) => {
  const result = await action(data)
  if (result.success) toggleEditState()
  if (result.error) setError(result.error)
}}>
...
</form>

Plott HoundOP

2024-01-16T14:11:04.000Z

ah i see. thats much better

i was thinking something like this in my client form:

  const handleSomething = async () => {
      if (window.confirm("Are you sure you want to do something?")) {
          try {
              const response = await myServerAction(payload);
              if (response.success) {
                  toast.success(response.message);
                  // run some functions or modify state
              } else {
                  toast.error(response.message);
              }
          } catch (error) {
              toast.error('Error doing something:');
          }
      }
  };

@Plott Hound i was thinking something like this in my client form: const handleSomething = async () => { if (window.confirm("Are you sure you want to do something?")) { try { const response = await myServerAction(payload); if (response.success) { toast.success(response.message); // run some functions or modify state } else { toast.error(response.message); } } catch (error) { toast.error('Error doing something:'); } } };

Ray

2024-01-16T14:13:08.000Z

yea that works but I would put this to onSubmit props

<form action={myServerAction} onSubmit={handleSomething} />

so the form still work without javascript

but if your submittion require some validation then you don't need this

Plott HoundOP

2024-01-16T14:14:24.000Z

ok i see. thanks so much for explaining. i wont take up any more of your time.