Files
vf_react/src/providers/AppProviders.js
2025-11-22 16:41:22 +08:00

62 lines
1.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// src/providers/AppProviders.js
// 集中管理应用的所有 Provider
import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Provider as ReduxProvider } from 'react-redux';
// Redux Store
import { store } from '../store';
// Theme
import theme from '../theme/theme.js';
// Contexts
import { AuthProvider } from '../contexts/AuthContext';
import { NotificationProvider } from '../contexts/NotificationContext';
/**
* AppProviders - 应用的 Provider 容器
* 集中管理所有 Context Provider,避免 App.js 中层级嵌套过深
*
* Provider 层级顺序 (从外到内):
* 1. ReduxProvider - 状态管理层
* 2. ChakraProvider - UI 框架层(主要)
* 3. NotificationProvider - 通知系统
* 4. AuthProvider - 认证系统
*
* 注意:
* - HeroUI v3 不再需要 HeroUIProvider样式通过 CSS 导入加载 (src/styles/heroui.css)
* - AuthModal 已迁移到 Redux (authModalSlice + useAuthModal Hook)
* - ErrorBoundary 在各 Layout 层实现,不在全局层,以实现精细化错误隔离
* - MainLayout: PageTransitionWrapper 包含 ErrorBoundary (页面错误不影响导航栏)
* - Auth.js: 独立 ErrorBoundary (认证页错误隔离)
*
* @param {Object} props
* @param {React.ReactNode} props.children - 子组件
*/
export function AppProviders({ children }) {
return (
<ReduxProvider store={store}>
<ChakraProvider
theme={theme}
toastOptions={{
defaultOptions: {
position: 'top',
duration: 3000,
isClosable: true,
}
}}
>
<NotificationProvider>
<AuthProvider>
{children}
</AuthProvider>
</NotificationProvider>
</ChakraProvider>
</ReduxProvider>
);
}
export default AppProviders;