Хуки в 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 предоставляет удобный способ управления сложным состоянием, особенно при работе с формами или другими компонентами, требующими более сложной логики обновления состояния.