В чем разница между контекстом и Redux?

В чем разница между контекстом и Redux?

Это один из самых частых вопросов в React разработке. Оба инструмента используются для управления состоянием, но они решают разные проблемы и имеют разные варианты применения. Давайте разберёмся подробно.

React Context

Context — встроенный API в React для передачи данных глубоко вложенным компонентам без необходимости передавать props на каждом уровне (prop drilling).

// Создание контекста
const ThemeContext = React.createContext();

// Provider (поставщик данных)
function App() {
  const [theme, setTheme] = React.useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Content />
      <Footer />
    </ThemeContext.Provider>
  );
}

// Consumer (потребитель данных)
function DeepComponent() {
  const { theme, setTheme } = React.useContext(ThemeContext);
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Переключить на {theme === 'light' ? 'тёмную' : 'светлую'} тему
    </button>
  );
}

Redux

Redux — это предсказуемый контейнер состояния для JavaScript приложений. Это полноценная архитектура для управления состоянием с чёткими паттернами.

// Редюсер (чистая функция)
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Store
const store = createStore(counterReducer);

// Компонент
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

Ключевые различия

1. Назначение и область применения

Context:

• Для простого состояния (тема, язык, авторизация)
• Состояние, которое меняется редко
• Немного вложенных компонентов
• Не требует сложной логики обновления

Redux:

• Для сложного и обширного состояния
• Состояние, которое часто изменяется
• Многоуровневая архитектура
• Бизнес-логика обновления состояния

2. Производительность и переренdering

Context — проблема:

const UserContext = React.createContext();

function App() {
  const [user, setUser] = React.useState({ name: 'Alice', theme: 'light' });
  
  return (
    <UserContext.Provider value={user}>
      <Header /> {/* Перерендерится, если любое свойство user изменится */}
      <UserList /> {/* Перерендерится, даже если поменялась только тема */}
    </UserContext.Provider>
  );
}

// Если user.theme изменился, все компоненты, читающие UserContext,
// перерендерятся, даже если они используют только user.name

Redux — решение:

// Redux автоматически оптимизирует переренdering
const name = useSelector(state => state.user.name);
const theme = useSelector(state => state.theme);

// Компонент перерендерится только если name изменился
// theme может меняться без переренdering этого компонента

3. Архитектура и паттерны

Context:

• Просто передача данных
• Без строгих паттернов
• Логика может быть везде

Redux:

• Actions — описание происходящего
• Reducers — чистые функции, как состояние изменяется
• Store — единое хранилище
• Selectors — отбор данных из состояния

// Redux паттерн
// Action
const incrementAction = { type: 'INCREMENT', payload: 5 };

// Reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.payload;
    default:
      return state;
  }
}

// Selector
const selectCounter = state => state.counter;

// Компонент
function Counter() {
  const counter = useSelector(selectCounter);
  const dispatch = useDispatch();
  
  return (
    <button onClick={() => dispatch(incrementAction)}>
      {counter}
    </button>
  );
}

4. DevTools и отладка

Context:

• Стандартный React DevTools
• Сложнее отследить изменения
• Нет истории изменений

Redux:

• Redux DevTools — мощный инструмент
• Видна история всех actions
• Time-travel debugging (перемотка событий)
• Горячая перезагрузка (hot reload)

// Redux DevTools показывает
// 1. Все dispatched actions в порядке
// 2. Старое и новое состояние для каждого action
// 3. Можно кликнуть на action и перейти к нему
// 4. Можно записать сессию и replay'ить её

5. Боилерплейт и сложность

Context — простой код:

const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);
  
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  return React.useContext(AuthContext);
}

// Использование
function LoginButton() {
  const { user, setUser } = useAuth();
  // ...
}

Redux — больше код:

// actions.js
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export const loginAction = (user) => ({
  type: LOGIN,
  payload: user
});

// reducers.js
function authReducer(state = null, action) {
  switch (action.type) {
    case LOGIN:
      return action.payload;
    case LOGOUT:
      return null;
    default:
      return state;
  }
}

// selectors.js
export const selectUser = state => state.auth.user;
export const selectIsAuthenticated = state => state.auth.user !== null;

// Использование
function LoginButton() {
  const user = useSelector(selectUser);
  const dispatch = useDispatch();
  // ...
}

6. Масштабируемость

Context:

• Хорошо для малых приложений
• По мере роста становится сложнее
• Много маленьких контекстов приводит к prop drilling

// Много контекстов - неудобно
<AuthProvider>
  <ThemeProvider>
    <LocaleProvider>
      <NotificationsProvider>
        <App />
      </NotificationsProvider>
    </LocaleProvider>
  </ThemeProvider>
</AuthProvider>

Redux:

• Одно централизованное хранилище
• Легко масштабируется
• Структурировано для больших приложений

7. Асинхронность

Context:

// Сложно с асинхронностью
function useAsync(fn) {
  const [state, setState] = React.useState(null);
  
  React.useEffect(() => {
    fn().then(setState);
  }, [fn]);
  
  return state;
}

function App() {
  const data = useAsync(() => fetch('/api/users').then(r => r.json()));
  // Нет встроенной поддержки
}

Redux:

// Встроенная поддержка асинхронности через middleware
import { createAsyncThunk } from '@reduxjs/toolkit';

const fetchUsers = createAsyncThunk('users/fetch', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.data = action.payload;
        state.loading = false;
      });
  }
});

Когда использовать что

Используй Context когда:

• Простое состояние (тема, язык, авторизация)
• Состояние меняется редко
• Глубина вложения компонентов < 5
• Нет сложной бизнес-логики
• Не критична производительность

// Идеально для контекста
const UserContext = React.createContext();

function App() {
  const [user, setUser] = React.useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Router />
    </UserContext.Provider>
  );
}

Используй Redux когда:

• Большое приложение с много компонентов
• Сложные обновления состояния
• Много async операций
• Нужна отладка и история
• Требуется оптимизация производительности
• Нужно делиться состоянием между многими компонентами

// Идеально для Redux
const store = configureStore({
  reducer: {
    auth: authReducer,
    posts: postsReducer,
    comments: commentsReducer,
    notifications: notificationsReducer
  }
});

Гибридный подход

Много проектов используют оба инструмента:

// Redux для основного состояния
// Context для локального UI состояния

const store = configureStore({ reducer: rootReducer });
const UIContext = React.createContext();

function App() {
  const [uiState, setUIState] = React.useState({});
  
  return (
    <Provider store={store}>
      <UIContext.Provider value={{ uiState, setUIState }}>
        <MainApp />
      </UIContext.Provider>
    </Provider>
  );
}

Современная альтернатива: Redux Toolkit + React Hooks

// Redux Toolkit значительно упрощает код
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

const store = configureStore({
  reducer: counterSlice.reducer
});

export const { increment, decrement } = counterSlice.actions;

Заключение

Общее правило: начни с Context, переезжай на Redux, когда приложение растёт. Или используй оба — Redux для данных, Context для UI состояния.