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

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

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;
  }
};
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, которая принимает текущее состояние и действие и возвращает новое состояние в зависимости от типа действия. Перехватчик useReducerвызывается с помощью функции reducerи начального состояния ({ count: 0). Он возвращает текущее состояние и функцию dispatch, которая используется для отправки действий в редуктор.

Вызывая dispatchс соответствующим типом действия, мы можем обновлять состояние предсказуемым образом. В данном случае состояние представляет собой простой объект со свойством count. Функции incrementи decmentотправляют соответствующие действия для обновления счетчика.