Разбор ошибок и типичных проблем при использовании контекста и редьюсера

Типичные ошибки при использовании useContext и useReducer

Пора поговорить о том, какие на грабли чаще всего становятся разработчики при использовании этих инструментов.

1. Большой и монолитный контекст

Самая распространённая ловушка при использовании контекста — желание положить "всё и сразу" в один огромный контекст. Это может показаться удобным, ведь данные User, Theme, Cart (и ещё попугай) можно передавать через один Context.Provider. Но цена за это — снижение производительности и усложнение логики.

Проблема:

Когда любое изменение состояния в редьюсере запускает ререндер всего приложения, даже если обновились данные, которые не касаются большинства компонентов.

Как избежать:

Разбивайте контексты на мелкие части. Например, создайте отдельные контексты для темизации ThemeContext, данных пользователя UserContext и т.д.

// Плохой пример — один глобальный контекст
const AppContext = createContext({ theme: 'light', user: null, cart: [] });

// Лучше разделить контексты
const ThemeContext = createContext('light');
const UserContext = createContext(null);
const CartContext = createContext([]);

2. Неверное начальное состояние

Начальное состояние вашего редьюсера initialState задаёт основу всего состояния. Ошибка или неполнота здесь может вызвать странное поведение компонентов.

Проблема:

Ваш компонент ожидает, что в state.user лежит объект пользователя, а там undefined. Методы начинают ломаться.

Как избежать:

Явно описывайте начальное состояние с помощью интерфейсов TypeScript. TypeScript будет ругаться, если что-то не так.

interface State {
  user: { name: string; email: string } | null;
  theme: string;
}

const initialState: State = {
  user: null,
  theme: 'light',
};

3. Неправильная структура редьюсера

Некоторые разработчики делают редьюсер настолько сложным, что разобраться в нём может только тот, кто его писал (и не факт, что даже он сможет).

Проблема:

Редьюсер начинает выполнять функции, которые ему не свойственны. Например, кэширование данных или работа с асинхронными действиями.

Как избежать:

Придерживайтесь правила: редьюсер должен быть чистой функцией, которая принимает текущее состояние и действие, а возвращает новое состояние. Для любых асинхронных операций используйте другие подходы, например, middleware или useEffect.

// Правильный редьюсер
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_THEME':
      return { ...state, theme: action.payload };
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
}

4. Ошибки с использованием useContext

Вызов useContext вне Context.Provider — классическая ошибка не только новичков, но и опытных разработчиков, пишущих код после полуночи.

Проблема:

Вы пытаетесь прочитать данные из контекста, который ещё не обёрнут в Provider. React выдаёт ошибку: TypeError: Cannot read property 'value' of undefined.

Как избежать:

Обязательно оборачивайте ваше приложение в Context.Provider и предоставляйте значения по умолчанию для контекста.

const ThemeContext = createContext('light');

// Убедитесь, что ThemeProvider существует
const App = () => (
  <ThemeContext.Provider value="dark">
    <MyComponent />
  </ThemeContext.Provider>
);

5. Циклический ререндеринг

Если вы передаёте функции или сложные объекты в контекст, это может вызвать проблемы с ререндерингом, особенно если вы не мемоизируете данные.

Проблема:

Компоненты внутри Context.Provider ререндерятся каждый раз, даже если ничего не изменилось.

Как избежать:

Используйте такие хуки, как useMemo и useCallback, для мемоизации данных и предотвращения циклических ререндеров.

const userValue = useMemo(() => ({ name: 'John', email: 'john@example.com' }), []);
<UserContext.Provider value={userValue}>
  <MyComponent />
</UserContext.Provider>;

Советы по предотвращению ошибок

Используйте строгую типизацию

TypeScript — ваш лучший друг в мире контекста и редьюсеров. Он подскажет, если вы пытаетесь передать неправильное действие или состояние.

interface Action {
  type: 'SET_USER' | 'SET_THEME';
  payload?: any;
}

const reducer: React.Reducer<State, Action> = (state, action) => { ... };

Логируйте действия и состояние (особенно в разработке)

Отладка редьюсера может быть утомительной. Используйте инструмент вроде redux-logger либо просто добавьте console.log.

const reducer = (state, action) => {
  console.log('ACTION:', action);
  console.log('STATE BEFORE:', state);
  const newState = { ...state }; // обработка редьюсера
  console.log('STATE AFTER:', newState);
  return newState;
};

Сегментируйте логику приложения

Если редьюсер становится слишком сложным, разделяйте его на несколько более узких редьюсеров.

const userReducer = (state, action) => { ... };
const themeReducer = (state, action) => { ... };

const rootReducer = (state, action) => {
  return {
    user: userReducer(state.user, action),
    theme: themeReducer(state.theme, action),
  };
};

Избегайте передачи сложных объектов

Если вам нужно передавать сложные данные через контекст, подумайте, можно ли это упростить. Часто лучше передать простые данные и оставить бизнес-логику на уровне компонентов.

Особенности реализации в реальных проектах

В реальной жизни, особенно в крупных приложениях, контекст и редьюсер чаще всего комбинируют с библиотеками для глобального состояния, такими как Redux или Zustand. Однако, даже в небольших приложениях, правильное использование контекста и редьюсера может сэкономить массу времени и сил.

Не забывайте, что ваша задача — сделать приложение не только рабочим, но и поддерживаемым. Концепции, которые мы изучили, помогут вам избежать типичных ошибок и писать чистый, понятный код.