В React useReducer— это перехватчик, позволяющий управлять состоянием более сложным и предсказуемым способом. Это альтернатива более часто используемому хуку useStateпри работе с состоянием, которое включает в себя несколько подзначений или требует сложных переходов между состояниями.

С помощью useReducerвы определяете функцию редуктора, которая определяет, как должно обновляться состояние на основе определенных действий. Функция редуктора принимает текущее состояние и действие в качестве параметров и возвращает новое состояние. Хук useReducerвозвращает массив, содержащий текущее состояние и функцию отправки, которая используется для запуска действий.

Вот пример использования useReducer:

import React, { useReducer } from 'react';
// Reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};
// Component using useReducer
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };
  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
export default Counter;

В этом примере функция reducerобрабатывает обновления состояния в зависимости от типа действия. Исходное состояние — { count: 0, а функция dispatchиспользуется для запуска обновлений состояния при нажатии кнопок.

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