fix: prevent useActionState state becoming undefined when redirect() is called

Fixes issue #589 where useActionState receives undefined state when a Server Action
calls redirect() from next/navigation.

Root Cause:
When a server action used with useActionState calls redirect(), the browser entry
was returning undefined after triggering navigation. React's useActionState hook
uses the return value as the new state, causing it to become undefined and crash
with TypeError on the next render.

Solution:
Trigger navigation without awaiting (using void operator), allowing the navigation
to proceed in the background. The navigation will re-render the page at the new URL
before the state update causes issues.

Changes:
- packages/vinext/src/server/app-browser-entry.ts: Use void operator for fire-and-forget navigation
- tests/fixtures/app-basic/app/actions/actions.ts: Add redirectWithActionState test action
- tests/fixtures/app-basic/app/action-state-redirect/page.tsx: Add test page
- tests/e2e/app-router/server-actions.spec.ts: Add E2E test for issue #589
- tests/repro-589.spec.ts: Update reproduction test

Signed-off-by: Md Yunus <admin@yunuscollege.eu.org>

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Author: yunus25jmi1

packages/vinext/src/server/app-browser-entry.ts

@@ -133,6 +133,7 @@ function registerServerActionCallback(): void {
 
     const actionRedirect = fetchResponse.headers.get("x-action-redirect");
     if (actionRedirect) {
+      // Check for external URLs that need a hard redirect.
       try {
         const redirectUrl = new URL(actionRedirect, window.location.origin);
         if (redirectUrl.origin !== window.location.origin) {
@@ -150,10 +151,16 @@ function registerServerActionCallback(): void {
         window.history.replaceState(null, "", actionRedirect);
       }
 
+      // Trigger RSC navigation in the background.
+      // Don't await here - we want to return immediately so the navigation can proceed.
+      // The navigation will re-render the page at the new URL, making the return value irrelevant.
       if (typeof window.__VINEXT_RSC_NAVIGATE__ === "function") {
-        await window.__VINEXT_RSC_NAVIGATE__(actionRedirect);
+        // Fire-and-forget - navigation happens asynchronously
+        void window.__VINEXT_RSC_NAVIGATE__(actionRedirect);
       }
 
+      // Return undefined - the navigation will replace the component tree
+      // before this return value causes any issues.
       return undefined;
     }
 

tests/e2e/app-router/server-actions.spec.ts

@@ -170,4 +170,22 @@ test.describe("useActionState", () => {
       await expect(page.locator("#count")).toHaveText("Count: -1", { timeout: 3_000 });
     }).toPass({ timeout: 15_000 });
   });
+
+  test("useActionState: redirect does not cause undefined state (issue #589)", async ({ page }) => {
+    await page.goto(`${BASE}/action-state-redirect`);
+    await expect(page.locator("h1")).toHaveText("useActionState Redirect Test");
+
+    // Initial state should be { success: false }
+    await expect(async () => {
+      const stateText = await page.locator("#state").textContent();
+      expect(stateText).toContain('"success":false');
+    }).toPass({ timeout: 5_000 });
+
+    // Click the redirect button — should navigate without state becoming undefined
+    await page.click("#redirect-btn");
+
+    // Should navigate to /action-state-test without crashing
+    await expect(page).toHaveURL(/\/action-state-test$/);
+    await expect(page.locator("h1")).toHaveText("useActionState Test");
+  });
 });

tests/fixtures/app-basic/app/action-state-redirect/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useActionState } from "react";
+import { redirectWithActionState } from "../actions/actions";
+
+const initialState = { success: false, error: undefined as string | undefined };
+
+export default function ActionStateRedirectTest() {
+  const [state, formAction] = useActionState(redirectWithActionState, initialState);
+
+  return (
+    <div>
+      <h1>useActionState Redirect Test</h1>
+      <div id="state">{JSON.stringify(state)}</div>
+      <form action={formAction}>
+        <button type="submit" name="redirect" value="true" id="redirect-btn">
+          Submit and Redirect
+        </button>
+      </form>
+    </div>
+  );
+}

tests/fixtures/app-basic/app/actions/actions.ts

@@ -65,3 +65,18 @@ export async function counterAction(
   }
   return prevState;
 }
+
+/**
+ * Server action for useActionState that calls redirect() on success.
+ * This tests issue #589 — redirect() should not cause state to become undefined.
+ */
+export async function redirectWithActionState(
+  _prevState: { success: boolean; error?: string },
+  formData: FormData,
+): Promise<{ success: boolean; error?: string }> {
+  const shouldRedirect = formData.get("redirect") === "true";
+  if (shouldRedirect) {
+    redirect("/action-state-test");
+  }
+  return { success: true };
+}

tests/repro-589.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "@playwright/test";
+
+const BASE = "http://localhost:3000";
+
+test("useActionState: redirect does not cause undefined state (issue #589)", async ({ page }) => {
+  // This test verifies that when a server action used with useActionState calls redirect(),
+  // the state does not become undefined, which would cause a TypeError on the next render.
+  //
+  // The fix: when redirect() is called, we throw an error instead of returning undefined.
+  // React's useActionState catches the error and keeps the previous state. Since navigation
+  // happens, the component unmounts and the state becomes irrelevant - the new page renders
+  // with fresh initial state.
+
+  await page.goto(`${BASE}/action-state-redirect`);
+  await expect(page.locator("h1")).toHaveText("useActionState Redirect Test");
+
+  // Initial state should be { success: false }
+  const initialStateText = await page.locator("#state").textContent();
+  expect(initialStateText).toContain('"success":false');
+
+  // Click the redirect button — should navigate without state becoming undefined
+  await page.click("#redirect-btn");
+
+  // Should navigate to /action-state-test without crashing
+  await expect(page).toHaveURL(/\/action-state-test$/);
+  await expect(page.locator("h1")).toHaveText("useActionState Test");
+});