useReducer в ReactJS  — простой способ

Допустим, у нас есть простой компонент счетчика, который отображает счетчик и позволяет пользователю увеличивать или уменьшать счетчик с помощью двух кнопок. Вот как мы можем использовать useReducer для управления состоянием счетчика:

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0);

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

В этом примере мы определяем функцию reducer, которая принимает текущее состояние и объект действия и возвращает новое состояние в зависимости от типа действия. Мы также определяем компонент Counter, который вызывает хук useReducer и передает функцию reducer, а также начальное состояние 0. Хук useReducer возвращает массив с текущим состоянием (count) и функцию dispatch, которая используется для отправки действий, которые будут обновлять состояние.

Мы определяем две вспомогательные функции, handleIncrement и handleDecrement, которые вызывают функцию dispatch с объектами действий, которые имеют типы 'INCREMENT' и 'DECREMENT' соответственно. Наконец, мы визуализируем текущее количество и две кнопки, которые вызывают вспомогательные функции при нажатии.

Когда пользователь нажимает кнопку Increment, функция handleIncrement отправляет объект действия с типом 'INCREMENT', в результате чего функция reducer возвращает новое состояние, которое на единицу больше текущего состояния. Точно так же, когда пользователь нажимает кнопку Decrement, функция handleDecrement отправляет объект действия с типом 'DECREMENT', в результате чего функция reducer возвращает новое состояние, которое на единицу меньше текущего состояния.

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