Хуки в React: useReducer

Хук useReducer в React предоставляет альтернативный способ управления состоянием компонентов, особенно при работе с более сложными состояниями или логикой, которая требует обновления состояния на основе предыдущего состояния. Вот пример использования useReducer для управления формой:

Создание редуктора:

// formReducer.js
const formReducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'RESET_FORM':
      return action.initialState;
    default:
      return state;
  }
};

export default formReducer;

Использование useReducer в компоненте:

import React, { useReducer } from 'react';
import formReducer from './formReducer';

const initialState = {
  name: '',
  email: '',
  message: '',
};

const FormComponent = () => {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    dispatch({ type: 'CHANGE_FIELD', field: name, value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Отправка данных формы
    console.log('Form submitted:', state);
  };

  const handleReset = () => {
    dispatch({ type: 'RESET_FORM', initialState });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={state.name} onChange={handleChange} />
      <input type="email" name="email" value={state.email} onChange={handleChange} />
      <textarea name="message" value={state.message} onChange={handleChange} />
      <button type="submit">Submit</button>
      <button type="button" onClick={handleReset}>Reset</button>
    </form>
  );
};

export default FormComponent;

В этом примере useReducer используется для управления состоянием формы. Редуктор formReducer обрабатывает действия для изменения полей формы (CHANGE_FIELD) и сброса формы (RESET_FORM). Каждое действие передает тип и соответствующие данные, которые изменяют состояние.

Хук useReducer предоставляет удобный способ управления сложным состоянием, особенно при работе с формами или другими компонентами, требующими более сложной логики обновления состояния.