remove redux devtools from router reducer

Author: ztanner

packages/next/src/client/components/app-router.tsx

@@ -39,11 +39,7 @@ import {
   PathnameContext,
   PathParamsContext,
 } from '../../shared/lib/hooks-client-context.shared-runtime'
-import {
-  useReducerWithReduxDevtools,
-  useUnwrapState,
-  type ReduxDevtoolsSyncFn,
-} from './use-reducer-with-devtools'
+import { useReducer, useUnwrapState } from './use-reducer'
 import { ErrorBoundary, type ErrorComponent } from './error-boundary'
 import { isBot } from '../../shared/lib/router/utils/is-bot'
 import { addBasePath } from '../add-base-path'
@@ -75,10 +71,8 @@ function isExternalURL(url: URL) {
 
 function HistoryUpdater({
   appRouterState,
-  sync,
 }: {
   appRouterState: AppRouterState
-  sync: ReduxDevtoolsSyncFn
 }) {
   useInsertionEffect(() => {
     if (process.env.__NEXT_APP_NAV_FAIL_HANDLING) {
@@ -108,9 +102,7 @@ function HistoryUpdater({
     } else {
       window.history.replaceState(historyState, '', canonicalUrl)
     }
-
-    sync(appRouterState)
-  }, [appRouterState, sync])
+  }, [appRouterState])
   return null
 }
 
@@ -219,7 +211,7 @@ function Router({
   actionQueue: AppRouterActionQueue
   assetPrefix: string
 }) {
-  const [state, dispatch, sync] = useReducerWithReduxDevtools(actionQueue)
+  const [state, dispatch] = useReducer(actionQueue)
   const { canonicalUrl } = useUnwrapState(state)
   // Add memoized pathname/query for useSearchParams and usePathname.
   const { searchParams, pathname } = useMemo(() => {
@@ -606,7 +598,7 @@ function Router({
 
   return (
     <>
-      <HistoryUpdater appRouterState={useUnwrapState(state)} sync={sync} />
+      <HistoryUpdater appRouterState={useUnwrapState(state)} />
       <RuntimeStyles />
       <PathParamsContext.Provider value={pathParams}>
         <PathnameContext.Provider value={pathname}>

packages/next/src/client/components/use-reducer-with-devtools.ts

@@ -0,0 +1,35 @@
+import type { Dispatch } from 'react'
+import React, { use } from 'react'
+import { useCallback } from 'react'
+import type {
+  AppRouterState,
+  ReducerActions,
+  ReducerState,
+} from './router-reducer/router-reducer-types'
+import type { AppRouterActionQueue } from '../../shared/lib/router/action-queue'
+import { isThenable } from '../../shared/lib/is-thenable'
+
+export function useUnwrapState(state: ReducerState): AppRouterState {
+  // reducer actions can be async, so sometimes we need to suspend until the state is resolved
+  if (isThenable(state)) {
+    const result = use(state)
+    return result
+  }
+
+  return state
+}
+
+export function useReducer(
+  actionQueue: AppRouterActionQueue
+): [ReducerState, Dispatch<ReducerActions>] {
+  const [state, setState] = React.useState<ReducerState>(actionQueue.state)
+
+  const dispatch = useCallback(
+    (action: ReducerActions) => {
+      actionQueue.dispatch(action, setState)
+    },
+    [actionQueue]
+  )
+
+  return [state, dispatch]
+}

packages/next/src/client/components/use-reducer.ts

@@ -7,7 +7,6 @@ import {
   ACTION_NAVIGATE,
   ACTION_RESTORE,
 } from '../../../client/components/router-reducer/router-reducer-types'
-import type { ReduxDevToolsInstance } from '../../../client/components/use-reducer-with-devtools'
 import { reducer } from '../../../client/components/router-reducer/router-reducer'
 import { startTransition } from 'react'
 import { isThenable } from '../is-thenable'
@@ -16,7 +15,6 @@ export type DispatchStatePromise = React.Dispatch<ReducerState>
 
 export type AppRouterActionQueue = {
   state: AppRouterState
-  devToolsInstance?: ReduxDevToolsInstance
   dispatch: (payload: ReducerActions, setState: DispatchStatePromise) => void
   action: (state: AppRouterState, action: ReducerActions) => ReducerState
   pending: ActionQueueNode | null
@@ -85,10 +83,6 @@ async function runAction({
 
     actionQueue.state = nextState
 
-    if (actionQueue.devToolsInstance) {
-      actionQueue.devToolsInstance.send(payload, nextState)
-    }
-
     runRemainingActions(actionQueue, setState)
     action.resolve(nextState)
   }