diff --git a/src/content/docs/fr/guides/integrations-guide/react.mdx b/src/content/docs/fr/guides/integrations-guide/react.mdx index fd0784a3bd403..c3bb60da5a0a6 100644 --- a/src/content/docs/fr/guides/integrations-guide/react.mdx +++ b/src/content/docs/fr/guides/integrations-guide/react.mdx @@ -115,30 +115,30 @@ 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) +## Intégrer des actions avec `useActionState()` -L'intégration `@astrojs/react` fournit deux fonctions expérimentales à utiliser avec les [actions d'Astro][astro-actions] : `experimental_withState()` et `experimental_getActionState()`. +L'intégration `@astrojs/react` fournit deux fonctions à utiliser avec les [actions d'Astro][astro-actions] : `withState()` et `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()` +### `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` mention « J'aime ». +Vous pouvez transmettre `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'; -import { experimental_withState } from '@astrojs/react/actions'; +import { withState } from '@astrojs/react/actions'; import { useActionState } from "react"; export function Like({ postId }: { postId: string }) { const [state, action, pending] = useActionState( - experimental_withState(actions.like), + withState(actions.like), { data: 0, error: undefined }, // mentions « J'aime » et erreurs initiales ); @@ -151,24 +151,24 @@ export function Like({ postId }: { postId: string }) { } ``` -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. +La fonction `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()` +### `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. +Vous pouvez accéder à l'état enregistré par `useActionState()` sur le serveur dans votre gestionnaire d'actions (`handler`) à l'aide de `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'; +import { getActionState } from '@astrojs/react/actions'; export const server = { like: defineAction({ @@ -176,7 +176,7 @@ export const server = { postId: z.string(), }), handler: async ({ postId }, ctx) => { - const { data: currentLikes = 0, error } = await experimental_getActionState>(ctx); + const { data: currentLikes = 0, error } = await getActionState>(ctx); // gérer les erreurs if (error) throw error;