97 lines
2.7 KiB
Markdown
97 lines
2.7 KiB
Markdown
# Providers Layer
|
|
|
|
## Table of Contents
|
|
|
|
- [Providers Layer](#providers-layer)
|
|
- [Purpose](#purpose)
|
|
- [Responsibilities](#responsibilities)
|
|
- [Recommended Structure](#recommended-structure)
|
|
- [App Provider Composition](#app-provider-composition)
|
|
- [Example: AppProviders](#example-appproviders)
|
|
|
|
## Purpose
|
|
|
|
The `providers` layer is responsible for **global application context and environment configuration**.
|
|
|
|
It acts as the **composition root of the application**, where all global React providers are initialized and combined.
|
|
|
|
Providers make global services available across the entire application, such as:
|
|
|
|
- routing
|
|
- data fetching clients
|
|
- theme configuration
|
|
- authentication/session context
|
|
- internationalization
|
|
- notifications
|
|
- global state management
|
|
|
|
Instead of importing these providers in many places, they are **composed once and applied at the application root**.
|
|
|
|
## Responsibilities
|
|
|
|
The `providers` layer is responsible for:
|
|
|
|
- initializing global React context providers
|
|
- configuring global services
|
|
- composing multiple providers into a single entry point
|
|
- exposing the provider tree to the application root
|
|
|
|
## Recommended Structure
|
|
|
|
```plaintext
|
|
providers/
|
|
|
|
|
| --- AppProviders.tsx # main provider composition
|
|
|
|
|
| --- QueryProvider.tsx # React Query setup
|
|
| --- RouterProvider.tsx # routing configuration
|
|
| --- ThemeProvider.tsx # theme context
|
|
| --- AuthProvider.tsx # authentication/session provider
|
|
| --- I18nProvider.tsx # internationalization provider
|
|
|
|
|
| --- index.ts # re-export providers (optional)
|
|
```
|
|
|
|
## App Provider Composition
|
|
|
|
Instead of wrapping the application with multiple providers manually, they are composed in a single root provider component.
|
|
This centralizes the provider tree and simplifies application initialization.
|
|
Example usage in the application entry point:
|
|
|
|
```tsx
|
|
import { AppProviders } from "@/providers/AppProviders";
|
|
|
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
<AppProviders>
|
|
<App />
|
|
</AppProviders>,
|
|
);
|
|
```
|
|
|
|
### Example: AppProviders
|
|
|
|
This component acts as the global application wrapper.
|
|
|
|
```tsx
|
|
import { ReactNode, FC, PropsWithChildren } from "react";
|
|
import { QueryProvider } from "./QueryProvider";
|
|
import { ThemeProvider } from "./ThemeProvider";
|
|
import { AuthProvider } from "./AuthProvider";
|
|
import { RouterProvider } from "./RouterProvider";
|
|
import { I18nProvider } from "./I18nProvider";
|
|
|
|
export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
|
|
return (
|
|
<QueryProvider>
|
|
<I18nProvider>
|
|
<AuthProvider>
|
|
<ThemeProvider>
|
|
<RouterProvider>{children}</RouterProvider>
|
|
</ThemeProvider>
|
|
</AuthProvider>
|
|
</I18nProvider>
|
|
</QueryProvider>
|
|
);
|
|
};
|
|
```
|