Управление состоянием

Документация по управлению состоянием во фронтенд-приложении.

Введение

Управление состоянием является ключевым аспектом разработки React-приложений. В нашем проекте используется несколько подходов к управлению состоянием в зависимости от требований:

Локальное состояние компонентов с использованием React Hooks
Глобальное состояние через Context API
Состояние форм с использованием React Hook Form
Управление состоянием серверных данных с использованием TanStack Query

Локальное состояние (useState)

Для управления локальным состоянием компонентов используется хук useState. Это базовый подход для хранения состояния, которое относится только к конкретному компоненту.

typescript

// Пример использования useState
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export default function Counter() {
  // Объявление переменной состояния и функции для её обновления
  const [count, setCount] = useState(0);
  
  // Функция для увеличения счётчика
  const increment = () => setCount(count + 1);
  
  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-xl">Значение счётчика: {count}</p>
      <Button onClick={increment}>Увеличить</Button>
    </div>
  );
}

Для управления более сложным состоянием можно объединять несколько переменных состояния в объект:

typescript

// Управление формой с использованием useState
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function ProfileForm() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: ""
  });
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Form data:", formData);
    // Дальнейшая обработка...
  };
  
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <Input 
          name="firstName"
          value={formData.firstName}
          onChange={handleChange}
          placeholder="Имя"
        />
      </div>
      <div>
        <Input 
          name="lastName"
          value={formData.lastName}
          onChange={handleChange}
          placeholder="Фамилия"
        />
      </div>
      <div>
        <Input 
          name="email"
          type="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Email"
        />
      </div>
      <Button type="submit">Сохранить</Button>
    </form>
  );
}

Глобальное состояние (Context API)

Для управления глобальным состоянием в приложении используется Context API. Главным примером является AuthContext, который управляет состоянием аутентификации пользователя.

typescript

// contexts/AuthContext.tsx
"use client";

import React, { createContext, useContext, useEffect, useState } from "react";

interface User {
  id: number;
  email: string;
  first_name?: string;
  last_name?: string;
  is_verified: boolean;
  oauth_provider?: string;
  oauth_id?: string;
  profile_image_url?: string;
}

interface AuthContextType {
  user: User | null;
  isLoading: boolean;
  isAuthenticated: boolean;
  login: (email: string, password: string) => Promise<void>;
  register: (
    email: string,
    password: string,
    firstName?: string,
    lastName?: string
  ) => Promise<void>;
  logout: () => Promise<void>;
  refreshUser: () => Promise<void>;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const refreshUser = async () => {
    try {
      const response = await fetch("/api/auth/me");
      if (response.ok) {
        const userData = await response.json();
        setUser(userData);
      } else {
        setUser(null);
      }
    } catch (error) {
      console.error("Error fetching user:", error);
      setUser(null);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    refreshUser();
  }, []);

  const login = async (email: string, password: string) => {
    // Реализация логики входа
    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, password }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || "Login failed");
      }

      await refreshUser();
    } catch (error) {
      console.error("Login error:", error);
      throw error;
    }
  };

  // Другие методы: register, logout, ...

  return (
    <AuthContext.Provider
      value={{
        user,
        isLoading,
        isAuthenticated: !!user,
        login,
        register,
        logout,
        refreshUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
}

Для использования AuthContext в компонентах необходимо обернуть приложение в AuthProvider в корневом layout:

typescript

// app/layout.tsx
import { AuthProvider } from "@/contexts/AuthContext";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ru">
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Доступ к контексту в компонентах осуществляется через хук useAuth:

typescript

// Пример использования useAuth
"use client";

import { useAuth } from "@/contexts/AuthContext";
import { Button } from "@/components/ui/button";

export default function ProfileButton() {
  const { user, isAuthenticated, isLoading, logout } = useAuth();
  
  if (isLoading) {
    return <p>Загрузка...</p>;
  }
  
  if (!isAuthenticated) {
    return <Button>Войти</Button>;
  }
  
  return (
    <div className="flex gap-2">
      <p>Привет, {user?.first_name || 'Пользователь'}</p>
      <Button variant="outline" onClick={logout}>Выйти</Button>
    </div>
  );
}