# Контексты

Эта директория содержит React Context провайдеры, которые управляют глобальным состоянием приложения.

## Структура

```
contexts/
├── AuthContext.jsx              # Контекст аутентификации
├── ProfileActionsContext.jsx    # Контекст действий профиля
└── ClickSparkContext.jsx        # Контекст для эффекта искры при клике
```

## Описание контекстов

### AuthContext
Управляет состоянием аутентификации пользователя:
- Хранит информацию о текущем пользователе
- Предоставляет методы для входа, выхода и регистрации
- Обрабатывает обновление профиля
- Управляет состоянием загрузки и ошибками

```javascript
const { user, login, logout, register, updateProfile } = useAuth();
```

### ProfileActionsContext
Управляет действиями, связанными с профилем пользователя:
- Обновление витрины рецензий
- Управление настройками профиля
- Обработка действий с достижениями
- Управление статистикой пользователя

```javascript
const { updateShowcase, updateSettings, handleAchievement } = useProfileActions();
```

### ClickSparkContext
Управляет эффектом искры при клике:
- Добавление и удаление искр
- Анимация искр
- Настройка параметров эффекта

```javascript
const { addSpark, removeSpark, setSparkConfig } = useClickSpark();
```

## Использование

1. Импортируйте нужный контекст:
```javascript
import { useAuth } from '../contexts/AuthContext';
```

2. Используйте хук в компоненте:
```javascript
const MyComponent = () => {
  const { user } = useAuth();
  // ...
};
```

## Лучшие практики

1. Используйте контексты только для глобального состояния
2. Разделяйте контексты по функциональности
3. Мемоизируйте значения контекста
4. Обрабатывайте случаи, когда контекст не доступен
5. Документируйте API контекста
6. Используйте TypeScript для типизации контекста

## Пример создания контекста

```javascript
import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const [state, setState] = useState(initialState);

  const value = {
    state,
    setState,
    // другие методы
  };

  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

export const useMyContext = () => {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error('useMyContext must be used within a MyProvider');
  }
  return context;
};
``` 