React Redux如何在点击浏览器回退按钮时清空redux store状态

该现象的根本原因：Redux Store存储在浏览器运行内存中，前端路由跳转（包括浏览器回退操作）属于无刷新页面切换，内存数据不会自动重置，只有页面刷新时内存被回收才会清空Store状态。

方案1：组件卸载时触发清空（最推荐） #

从/abc/add回退到/abc时，路由对应的CompB组件会被自动卸载，直接在CompB的卸载生命周期中派发清空对应状态的Action即可：

// CompB 函数组件示例
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
// 引入你自己定义的清空对应状态的Action
import { clearFormState } from '@/store/actions/formAction'

const CompB = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    // 返回的函数会在组件卸载时执行
    return () => {
      dispatch(clearFormState())
    }
  }, [dispatch])

  // 组件其他业务逻辑省略
  return <div>CompB内容</div>
}
export default CompB

如果你使用类组件写法，直接在componentWillUnmount生命周期中执行相同的dispatch逻辑即可。

方案2：全局路由监听触发（适合多路由场景管控） #

如果需要精准控制只有离开/abc/add路由时才清空状态，可在路由父组件中添加路由监听逻辑：

// 路由父组件示例
import { useEffect } from 'react'
import { useLocation, useDispatch } from 'react-router-dom'
import { clearFormState } from '@/store/actions/formAction'

const RouteRoot = () => {
  const location = useLocation()
  const dispatch = useDispatch()

  useEffect(() => {
    // 路由变化时，校验上一个路由是否为/abc/add
    return () => {
      if (location.pathname === '/abc/add') {
        dispatch(clearFormState())
      }
    }
  }, [location, dispatch])

  // 原有路由逻辑
  return (
    <div>
      {/* Material ui autocomplete component which sets value in redux store */}
      <Switch>
        <Route exact path="/abc"><CompA/></Route>
        <Route path="/abc/add"><CompB/></Route>
      </Switch>
    </div>
  )
}
export default RouteRoot

注意事项 #

• 编写清空Action时建议仅清空当前业务对应的状态切片，不要全局清空全量Store，避免影响其他无关模块的状态
• 以上方案对所有离开/abc/add的场景（回退、主动跳转到其他路由、关闭标签页）均生效，符合绝大多数业务需求

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