From b515dd08d5ec203ccb0695d61b32685722f98050 Mon Sep 17 00:00:00 2001 From: Igor Gassmann Date: Wed, 2 Oct 2024 11:22:25 +0200 Subject: [PATCH 1/5] Add missing React imports --- src/content/reference/rsc/server-actions.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index 041f5e852c8..b299b9635bd 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -103,9 +103,10 @@ export async function updateName(name) { } ``` -```js [[1, 3, "updateName"], [1, 13, "updateName"], [2, 11, "submitAction"], [2, 23, "submitAction"]] +```js [[1, 4, "updateName"], [1, 14, "updateName"], [2, 12, "submitAction"], [2, 24, "submitAction"]] "use client"; +import {useState, useTransition} from 'react'; import {updateName} from './actions'; function UpdateName() { From eda25b7045b9bf0d95e21afa718aafb9758d1762 Mon Sep 17 00:00:00 2001 From: Igor Gassmann Date: Wed, 2 Oct 2024 11:25:25 +0200 Subject: [PATCH 2/5] Fix error handling --- src/content/reference/rsc/server-actions.md | 56 ++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index b299b9635bd..e9caa0bce51 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -104,35 +104,35 @@ export async function updateName(name) { ``` ```js [[1, 4, "updateName"], [1, 14, "updateName"], [2, 12, "submitAction"], [2, 24, "submitAction"]] -"use client"; - -import {useState, useTransition} from 'react'; -import {updateName} from './actions'; - -function UpdateName() { - const [name, setName] = useState(''); - const [error, setError] = useState(null); - - const [isPending, startTransition] = useTransition(); - - const submitAction = async () => { - startTransition(async () => { - const {error} = await updateName(name); - if (!error) { - setError(error); - } else { - setName(''); - } - }) - } + "use client"; - return ( -
- - {state.error && Failed: {state.error}} -
- ) -} + import {useState, useTransition} from 'react'; + import {updateName} from './actions'; + + function UpdateName() { + const [name, setName] = useState(''); + const [error, setError] = useState(null); + + const [isPending, startTransition] = useTransition(); + + const submitAction = async () => { + startTransition(async () => { + const result = await updateName(name); + if (result?.error) { + setError(result.error); + } else { + setName(''); + } + }) + } + + return ( +
+ + {error && Failed: {error}} +
+ ) + } ``` This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client. From 9b01259ff753a69ad91e1c87579230000ef16141 Mon Sep 17 00:00:00 2001 From: Igor Gassmann Date: Wed, 2 Oct 2024 11:26:21 +0200 Subject: [PATCH 3/5] Remove extra indentation --- src/content/reference/rsc/server-actions.md | 56 ++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index e9caa0bce51..fbf2545233a 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -104,35 +104,35 @@ export async function updateName(name) { ``` ```js [[1, 4, "updateName"], [1, 14, "updateName"], [2, 12, "submitAction"], [2, 24, "submitAction"]] - "use client"; - - import {useState, useTransition} from 'react'; - import {updateName} from './actions'; - - function UpdateName() { - const [name, setName] = useState(''); - const [error, setError] = useState(null); - - const [isPending, startTransition] = useTransition(); - - const submitAction = async () => { - startTransition(async () => { - const result = await updateName(name); - if (result?.error) { - setError(result.error); - } else { - setName(''); - } - }) - } - - return ( -
- - {error && Failed: {error}} -
- ) +"use client"; + +import {useState, useTransition} from 'react'; +import {updateName} from './actions'; + +function UpdateName() { + const [name, setName] = useState(''); + const [error, setError] = useState(null); + + const [isPending, startTransition] = useTransition(); + + const submitAction = async () => { + startTransition(async () => { + const result = await updateName(name); + if (result?.error) { + setError(result.error); + } else { + setName(''); + } + }) } + + return ( +
+ + {error && Failed: {error}} +
+ ) +} ``` This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client. From 4379989a12fd69d74ad374db4c0f4bfc7ccd1e86 Mon Sep 17 00:00:00 2001 From: Igor Gassmann Date: Wed, 2 Oct 2024 11:39:47 +0200 Subject: [PATCH 4/5] Add missing imports --- src/content/reference/rsc/server-actions.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index fbf2545233a..0d276997338 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -77,7 +77,7 @@ When the bundler builds the `EmptyNote` Client Component, it will create a refer ```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]] "use client"; -import {createNoteAction} from './actions'; +import { createNoteAction } from './actions'; function EmptyNote() { console.log(createNoteAction); @@ -106,8 +106,8 @@ export async function updateName(name) { ```js [[1, 4, "updateName"], [1, 14, "updateName"], [2, 12, "submitAction"], [2, 24, "submitAction"]] "use client"; -import {useState, useTransition} from 'react'; -import {updateName} from './actions'; +import { useState, useTransition } from 'react'; +import { updateName } from './actions'; function UpdateName() { const [name, setName] = useState(''); @@ -149,7 +149,7 @@ You can pass a Server Action to a Form to automatically submit the form to the s ```js [[1, 3, "updateName"], [1, 7, "updateName"]] "use client"; -import {updateName} from './actions'; +import { updateName } from './actions'; function UpdateName() { return ( @@ -168,10 +168,11 @@ For more, see the docs for [Server Actions in Forms](/reference/rsc/use-server#s You can compose Server Actions with `useActionState` for the common case where you just need access to the action pending state and last returned response: -```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]] +```js [[1, 4, "updateName"], [1, 7, "updateName"], [2, 7, "submitAction"], [2, 10, "submitAction"]] "use client"; -import {updateName} from './actions'; +import { useActionState } from 'react'; +import { updateName } from './actions'; function UpdateName() { const [state, submitAction, isPending] = useActionState(updateName, {error: null}); @@ -193,10 +194,11 @@ For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useForm Server Actions also support progressive enhancement with the third argument of `useActionState`. -```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]] +```js [[1, 4, "updateName"], [1, 7, "updateName"], [2, 7, "/name/update"], [3, 7, "submitAction"], [3, 10, "submitAction"]] "use client"; -import {updateName} from './actions'; +import { useActionState } from 'react'; +import { updateName } from './actions'; function UpdateName() { const [, submitAction] = useActionState(updateName, null, `/name/update`); From 9d670f00eda478ebb82d5b3a0e6a1ad7e975bdfb Mon Sep 17 00:00:00 2001 From: Igor Gassmann Date: Wed, 2 Oct 2024 11:54:58 +0200 Subject: [PATCH 5/5] Update server-actions.md --- src/content/reference/rsc/server-actions.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index 0d276997338..65be342ca61 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -103,25 +103,25 @@ export async function updateName(name) { } ``` -```js [[1, 4, "updateName"], [1, 14, "updateName"], [2, 12, "submitAction"], [2, 24, "submitAction"]] +```js [[1, 4, "updateName"], [1, 14, "updateName"], [2, 11, "submitAction"], [2, 24, "submitAction"]] "use client"; import { useState, useTransition } from 'react'; import { updateName } from './actions'; function UpdateName() { - const [name, setName] = useState(''); const [error, setError] = useState(null); const [isPending, startTransition] = useTransition(); - const submitAction = async () => { + const submitAction = async (formData) => { startTransition(async () => { + const name = formData.get('name'); const result = await updateName(name); if (result?.error) { setError(result.error); } else { - setName(''); + setError(null); } }) }