From f9665597ab6dc6162c0cfdf76ac650213552ebae Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 19 Sep 2025 13:05:38 +0200 Subject: [PATCH 1/2] i18n(fr): update `integrations-guide/react.mdx` See #12323 --- .../fr/guides/integrations-guide/react.mdx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/src/content/docs/fr/guides/integrations-guide/react.mdx b/src/content/docs/fr/guides/integrations-guide/react.mdx index 2a085358bc6c1..23bb1f27760d5 100644 --- a/src/content/docs/fr/guides/integrations-guide/react.mdx +++ b/src/content/docs/fr/guides/integrations-guide/react.mdx @@ -9,6 +9,7 @@ category: renderer i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import Since from '~/components/Since.astro'; Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [React](https://react.dev/). @@ -114,6 +115,79 @@ Pour utiliser votre premier composant React dans Astro, dirigez-vous vers notre * 💧 les options d'hydratation côté client, et * 🤝 les possibilités de mélanger et d'imbriquer les frameworks. +## Intégrer des actions avec `useActionState()` (expérimental) + +L'intégration `@astrojs/react` fournit deux fonctions expérimentales à utiliser avec les [actions d'Astro][astro-actions] : `experimental_withState()` et `experimental_getActionState()`. + +Celles-ci sont utilisées avec le [hook useActionState() de React](https://fr.react.dev/reference/react/useActionState) afin de lire et de mettre à jour l'état côté client lorsque des actions sont déclenchées au moment de la soumission du formulaire. + +### `experimental_withState()` + +

+ +**Type :** `(action: FormFn) => (state: T, formData: FormData) => FormFn`
+ +

+ +Vous pouvez transmettre `experimental_withState()` et l'action que vous souhaitez déclencher au hook `useActionState()` de React en tant que fonction d'action du formulaire. L'exemple ci-dessous transmet une action `like` pour augmenter un compteur, avec un état initial de `0` mentions « J'aime ». + +```jsx title="Like.tsx" ins={2,7} "useActionState" +import { actions } from 'astro:actions'; +import { experimental_withState } from '@astrojs/react/actions'; +import { useActionState } from "react"; + +export function Like({ postId }: { postId: string }) { + const [state, action, pending] = useActionState( + experimental_withState(actions.like), + { data: 0, error: undefined }, // mentions « J'aime » et erreurs initiales + ); + + return ( +
+ + +
+ ); +} +``` + +La fonction `experimental_withState()` fera correspondre les types d'actions avec les attentes de React et préservera les métadonnées utilisées pour l'amélioration progressive, lui permettant de fonctionner même lorsque JavaScript est désactivé sur l'appareil de l'utilisateur. + +### `experimental_getActionState()` + +

+ +**Type :** `(context: ActionAPIContext) => Promise`
+ +

+ +Vous pouvez accéder à l'état enregistré par `useActionState()` sur le serveur dans votre gestionnaire d'actions (`handler`) à l'aide de `experimental_getActionState()`. Cette méthode accepte le [contexte de l'API d'Astro](/fr/reference/api-reference/#lobjet-de-contexte), et éventuellement, vous pouvez appliquer un type au résultat. + +L'exemple ci-dessous récupère la valeur actuelle des mentions « J'aime » à partir d'un compteur, typée en tant que nombre, afin de créer une action `like` incrémentielle : + +```ts title="actions.ts" ins={3,11} +import { defineAction, type SafeResult } from 'astro:actions'; +import { z } from 'astro:schema'; +import { experimental_getActionState } from '@astrojs/react/actions'; + +export const server = { + like: defineAction({ + input: z.object({ + postId: z.string(), + }), + handler: async ({ postId }, ctx) => { + const { data: currentLikes = 0, error } = await experimental_getActionState>(ctx); + + // gérer les erreurs + if (error) throw error; + + // écrire dans la base de données + return currentLikes + 1; + }, + }) +}; +``` + ## Options ### Combinaison de plusieurs frameworks JSX From 93daea754bd89ac105c9eb2c33f660eb4e16d2ad Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 19 Sep 2025 18:50:39 +0200 Subject: [PATCH 2/2] fix typo --- src/content/docs/fr/guides/integrations-guide/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/fr/guides/integrations-guide/react.mdx b/src/content/docs/fr/guides/integrations-guide/react.mdx index 23bb1f27760d5..fd0784a3bd403 100644 --- a/src/content/docs/fr/guides/integrations-guide/react.mdx +++ b/src/content/docs/fr/guides/integrations-guide/react.mdx @@ -129,7 +129,7 @@ Celles-ci sont utilisées avec le [hook useActionState() de React](https://fr.re

-Vous pouvez transmettre `experimental_withState()` et l'action que vous souhaitez déclencher au hook `useActionState()` de React en tant que fonction d'action du formulaire. L'exemple ci-dessous transmet une action `like` pour augmenter un compteur, avec un état initial de `0` mentions « J'aime ». +Vous pouvez transmettre `experimental_withState()` et l'action que vous souhaitez déclencher au hook `useActionState()` de React en tant que fonction d'action du formulaire. L'exemple ci-dessous transmet une action `like` pour augmenter un compteur, avec un état initial de `0` mention « J'aime ». ```jsx title="Like.tsx" ins={2,7} "useActionState" import { actions } from 'astro:actions';