React Redux 清理store的时机：关闭标签/浏览器时如何清空持久化store

之前在App.js中通过useEffect清理函数实现清理逻辑不生效的核心原因是：关闭单个标签页、关闭整个浏览器的场景下，浏览器会直接终止当前页面的所有JS执行进程，React组件树的完整卸载流程根本不会被触发，绑定在组件生命周期上的清理逻辑自然没有执行机会。 #

依赖的浏览器原生事件 #

不要把清理逻辑绑定在React组件生命周期上，要绑定浏览器提供的beforeunload事件：

• 该事件会在标签页即将被关闭、浏览器进程即将被终止、或者页面即将被跳转/刷新前触发，是目前唯一能在页面销毁前可靠执行同步JS逻辑的浏览器原生钩子。
• 不要使用unload事件：该事件触发时机过于靠后，多数浏览器会对回调内的API调用做严格限制，甚至直接跳过回调执行，可靠性远低于beforeunload。

代码挂载的正确位置 #

不要在App组件的内部生命周期中实现绑定逻辑，要在应用全局入口初始化位置（即完成Redux store创建、redux-persist实例初始化之后的入口文件，比如index.js/main.js中）完成事件绑定。这个位置的执行上下文不依赖React组件树的渲染状态，即使组件树因为异常没有完成渲染，只要JS执行上下文存在，事件监听就会生效。

参考实现逻辑 #

// 完成基础配置后拿到redux-persist的persistor实例
const persistor = persistStore(store)

// 绑定页面销毁前的清理逻辑
window.addEventListener('beforeunload', () => {
  // 主动清空redux-persist存储的所有持久化状态
  persistor.purge()
  // 可根据实际需求补充其他本地存储的清理操作
})

• 回调内仅保留同步、极短耗时的操作，不要写需要等待长耗时网络请求、大文件IO的逻辑：浏览器触发beforeunload后会立即开始销毁页面，长耗时异步逻辑会被直接终止，无法可靠执行完成。
• 如果需要区分“页面刷新保留持久化状态”和“关闭标签页/浏览器清空状态”的场景，可借助sessionStorage的天生特性做判断标记：比如页面首次加载时在sessionStorage写入标记，当beforeunload触发时检测该标记是否存在，仅在标记失效的关闭场景下执行清理逻辑，避免刷新时误清状态。

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