Что такое useReducer

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Как работает useReducer

useReducer принимает два аргумента: функцию-редюсер и начальное состояние. Он возвращает массив из двух элементов: текущего состояния и функции dispatch, которую вы используете для отправки действий, чтобы изменить состояние.

Пример использования useReducer

import React, { useReducer } from 'react';
​
// Определяем функцию-редюсер
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}
​
function Counter() {
  // Инициализируем useReducer с редюсером и начальным состоянием
  const [state, dispatch] = useReducer(reducer, { count: 0 });
​
  return (
    <div>
      <p>Count: {state.count}</p>
      {/* Используем dispatch для изменения состояния */}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
​
export default Counter;

Объяснение кода

1. Импортируем useReducer: Мы начинаем с импорта useReducer из React, чтобы использовать его в нашем компоненте.

2. Функция-редюсер: Это функция, которая принимает текущее состояние и действие, и возвращает новое состояние. В нашем примере, если действие имеет тип 'increment', мы увеличиваем count на 1, если 'decrement' — уменьшаем на 1.

3. Инициализация useReducer: Мы вызываем useReducer, передавая ему нашу функцию-редюсер и начальное состояние { count: 0 }. Это возвращает текущее состояние и функцию dispatch.

4. Отображение состояния: Мы отображаем текущее значение count из состояния.

5. Изменение состояния: Мы используем функцию dispatch для отправки действий. При нажатии на кнопки + или -, мы отправляем действия с типами 'increment' или 'decrement', соответственно, что вызывает изменение состояния через редюсер.

Зачем использовать useReducer

• Сложная логика состояния: Если у вас есть сложная логика, которая включает в себя несколько значений состояния или сложные условия, useReducer может сделать код более читаемым и управляемым.
• Предсказуемость: Поскольку useReducer использует чистые функции для изменения состояния, это делает логику более предсказуемой и легкой для тестирования.
• Сходство с Redux: Если вы уже знакомы с Redux, useReducer предоставляет знакомый паттерн для управления состоянием, но без необходимости в дополнительной библиотеке.

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