i18n(fr): update integrations-guide/react.mdx

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()`
+
+<p>
+
+**Type :** `(action: FormFn<T>) => (state: T, formData: FormData) => FormFn<T>`<br />
+<Since v="4.3.2" />
+</p>
+
+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';
+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 (
+    <form action={action}>
+      <input type="hidden" name="postId" value={postId} />
+      <button disabled={pending}>{state.data} ❤️</button>
+    </form>
+  );
+}
+```
+
+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()`
+
+<p>
+
+**Type :** `(context: ActionAPIContext) => Promise<T>`<br />
+<Since v="4.3.2" />
+</p>
+
+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<SafeResult<any, number>>(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