Next.js React Hook清理函数中出现Stale Redux状态是否属于严重问题？

问题结论 #

这个问题不属于严重问题，当前阶段可以正常忽略，但不建议长期保留该逻辑，避免后续迭代出现隐患。

原因说明 #

你观测到的RESET action无实际效果是Next.js SSR页面的hydration逻辑导致的：SSR页面之间跳转时，Next.js会先为新的SSR页面创建全新的Redux实例、完成服务端状态的hydration之后，才会执行旧页面useEffect的清理函数。此时清理函数中拿到的是旧Redux实例的dispatch，发送的RESET只会作用于已经废弃的旧实例，不会影响新页面的Redux状态，刚好和你「仅在跳转客户端渲染页面时重置状态」的预期一致，不会影响当前业务逻辑。

不建议长期保留的原因 #

该冗余dispatch属于潜在的逻辑债务：如果后续你调整了Redux实例的创建逻辑、修改了SSR页面的hydration规则，原本无效的RESET action可能会意外生效，导致SSR页面互跳时状态被意外清空，这类隐式问题后续排查成本较高。

优化方案 #

你可以将重置逻辑统一收敛到全局路由监听中，避免每个SSR页面编写重复的清理逻辑，同时彻底消除冗余dispatch：

// _app.js 全局文件中添加逻辑
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'

// 填写所有客户端渲染页面的路由路径
const CLIENT_RENDER_PATHS = ['/client-only-page']

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const dispatch = useDispatch()

  useEffect(() => {
    const checkRouteAndReset = (targetUrl) => {
      if (CLIENT_RENDER_PATHS.includes(targetUrl)) {
        dispatch({ type: 'RESET' })
      }
    }
    // 监听路由跳转开始事件
    router.events.on('routeChangeStart', checkRouteAndReset)
    return () => router.events.off('routeChangeStart', checkRouteAndReset)
  }, [router, dispatch])

  return <Component {...pageProps} />
}

内容的提问来源于stack exchange，提问作者Alexandr Bur