feat: 从 React Context 迁移到 Redux,实现了:

1.  集中式状态管理 - PostHog 状态与应用状态统一管理
  2.  自动追踪机制 - Middleware 自动拦截 Redux actions 进行追踪
  3.  Redux DevTools 支持 - 可视化调试所有 PostHog 事件
  4.  离线事件缓存 - 网络恢复时自动刷新缓存事件
  5.  性能优化 Hooks - 提供轻量级 Hook 避免不必要的重渲染
This commit is contained in:
zdl
2025-10-28 20:51:10 +08:00
parent 6506cb222b
commit fb76e442f7
5 changed files with 900 additions and 33 deletions

View File

@@ -59,9 +59,12 @@ import NotificationContainer from "components/NotificationContainer";
import ConnectionStatusBar from "components/ConnectionStatusBar";
import NotificationTestTool from "components/NotificationTestTool";
import ScrollToTop from "components/ScrollToTop";
import PostHogProvider from "components/PostHogProvider";
import { logger } from "utils/logger";
// PostHog Redux 集成
import { useDispatch } from 'react-redux';
import { initializePostHog } from "store/slices/posthogSlice";
/**
* ConnectionStatusBar 包装组件
* 需要在 NotificationProvider 内部使用,所以单独提取
@@ -109,6 +112,13 @@ function ConnectionStatusBarWrapper() {
function AppContent() {
const { colorMode } = useColorMode();
const dispatch = useDispatch();
// 🎯 PostHog Redux 初始化
useEffect(() => {
dispatch(initializePostHog());
logger.info('App', 'PostHog Redux 初始化已触发');
}, [dispatch]);
return (
<Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
@@ -296,34 +306,32 @@ export default function App() {
}, []);
return (
<PostHogProvider>
<ReduxProvider store={store}>
<ChakraProvider
theme={theme}
toastOptions={{
defaultOptions: {
position: 'top',
duration: 3000,
isClosable: true,
}
}}
>
<ErrorBoundary>
<NotificationProvider>
<AuthProvider>
<AuthModalProvider>
<IndustryProvider>
<AppContent />
<AuthModalManager />
<NotificationContainer />
<NotificationTestTool />
</IndustryProvider>
</AuthModalProvider>
</AuthProvider>
</NotificationProvider>
</ErrorBoundary>
</ChakraProvider>
</ReduxProvider>
</PostHogProvider>
<ReduxProvider store={store}>
<ChakraProvider
theme={theme}
toastOptions={{
defaultOptions: {
position: 'top',
duration: 3000,
isClosable: true,
}
}}
>
<ErrorBoundary>
<NotificationProvider>
<AuthProvider>
<AuthModalProvider>
<IndustryProvider>
<AppContent />
<AuthModalManager />
<NotificationContainer />
<NotificationTestTool />
</IndustryProvider>
</AuthModalProvider>
</AuthProvider>
</NotificationProvider>
</ErrorBoundary>
</ChakraProvider>
</ReduxProvider>
);
}