Как определить глобальное состояние?

Что такое глобальное состояние?

Глобальное состояние — это данные, доступные из любой части приложения без передачи через props. Примеры: информация о пользователе, тема оформления, язык интерфейса, состояние аутентификации. В React это часто управляется через Context API, Redux, Zustand или другие решения.

Способ 1: React Context API (встроенное решение)

Самый простой способ для среднего приложения — использовать Context:

// 1. Создаём контекст
import { createContext, useState, useContext } from 'react';

const GlobalContext = createContext();

// 2. Создаём провайдер
export function GlobalProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [isLoading, setIsLoading] = useState(false);

  const value = {
    user,
    setUser,
    theme,
    setTheme,
    isLoading,
    setIsLoading,
  };

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

// 3. Создаём хук для удобного доступа
export function useGlobal() {
  const context = useContext(GlobalContext);
  if (!context) {
    throw new Error('useGlobal должен использоваться внутри GlobalProvider');
  }
  return context;
}

// 4. Оборачиваем приложение в провайдер (в _app.tsx или App.tsx)
export default function App() {
  return (
    <GlobalProvider>
      <MainContent />
    </GlobalProvider>
  );
}

// 5. Используем в компонентах
function UserProfile() {
  const { user, setUser } = useGlobal();
  
  return (
    <div>
      <p>Пользователь: {user?.name}</p>
      <button onClick={() => setUser({ name: 'Alice' })}>
        Изменить пользователя
      </button>
    </div>
  );
}

Способ 2: Zustand (лёгкое и быстрое состояние)

Zustand — это библиотека с меньшим бойлерплейтом, чем Redux:

// store.ts
import { create } from 'zustand';

export const useGlobalStore = create((set) => ({
  user: null,
  theme: 'light',
  isLoading: false,
  
  // Экшены
  setUser: (user) => set({ user }),
  setTheme: (theme) => set({ theme }),
  setIsLoading: (isLoading) => set({ isLoading }),
  
  // Сложная логика
  logout: () => set({ 
    user: null, 
    theme: 'light' 
  }),
}));

// В компонентах
function Dashboard() {
  const { user, theme, setTheme } = useGlobalStore();
  
  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <p>Привет, {user?.name}!</p>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Переключить тему
      </button>
    </div>
  );
}

Способ 3: Redux (для больших приложений)

Для масштабных проектов с сложной логикой:

// slice.ts
import { createSlice } from '@reduxjs/toolkit';

export const globalSlice = createSlice({
  name: 'global',
  initialState: {
    user: null,
    theme: 'light',
    isLoading: false,
  },
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
    },
    setTheme: (state, action) => {
      state.theme = action.payload;
    },
    setIsLoading: (state, action) => {
      state.isLoading = action.payload;
    },
  },
});

export const { setUser, setTheme, setIsLoading } = globalSlice.actions;
export default globalSlice.reducer;

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import globalReducer from './slice';

export const store = configureStore({
  reducer: {
    global: globalReducer,
  },
});

// В компонентах
import { useDispatch, useSelector } from 'react-redux';

function Header() {
  const dispatch = useDispatch();
  const { user, theme } = useSelector(state => state.global);
  
  return (
    <header>
      <p>Пользователь: {user?.name}</p>
      <button onClick={() => dispatch(setTheme('dark'))}>
        Тёмная тема
      </button>
    </header>
  );
}

Сравнение подходов

Context — для маленьких приложений, простое состояние, встроенное в React. Zustand — для средних приложений с хорошей скоростью и минимумом кода. Redux — для больших приложений со сложной логикой и предсказуемостью.

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

1. Избегай глобального состояния для временных данных — используй локальное состояние компонента
2. Нормализуй данные — избегай вложенной структуры
3. Кэшируй вычисленные значения — используй selectors (Redux, Zustand)
4. Разделяй состояние — отдельные стейты для разных доменов
5. Типизируй состояние — используй TypeScript для надёжности

В современных проектах (React 19+) часто выбирают Zustand за простоту и скорость, а Context используют для простых данных, которые редко меняются.