Расскажи про подходы к управлению состоянием (state management) в React-приложениях: какие библиотеки для этого существуют? Расскажи про архитектуру Redux.

Подходы к управлению состоянием в React

В React-приложениях состояние может быть локальным (useState, useReducer) или глобальным. Для глобального состояния используют Context API, который встроен в React, или специализированные библиотеки: Redux, MobX, Zustand, Recoil, Jotai. Выбор зависит от сложности приложения: для простых проектов достаточно Context API, для крупных — Redux или MobX.

Архитектура Redux

Redux реализует паттерн Flux с единственным источником правды (single source of truth) — store. Состояние доступно только для чтения, изменения происходят через чистые функции-редьюсеры. Поток данных однонаправленный: компонент диспатчит action, action попадает в reducer, reducer создает новое состояние, store уведомляет подписчиков.

Пример кода

// action types
const ADD_TODO = 'ADD_TODO';

// action creator
const addTodo = (text) => ({
  type: ADD_TODO,
  payload: text
});

// reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
};

// store
import { createStore } from 'redux';
const store = createStore(todosReducer);

// dispatch
store.dispatch(addTodo('Learn Redux'));

Вывод

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