В React редьюсер — это чистая функция, которая принимает текущее состояние и действие и возвращает новое состояние на основе действия. Редьюсер обычно используется в сочетании с хуком useReducer, который обеспечивает способ управления состоянием в функциональных компонентах.
Вот пример простого редуктора:
function counterReducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error('Unexpected action');
}
}
В этом примере функция counterReducer принимает объект state и объект action. Объект state представляет текущее состояние счетчика, а объект action представляет действие, которое следует выполнить над состоянием.
Редюсер использует оператор switch, чтобы определить, какое действие следует выполнить. В этом случае единственными двумя действиями являются 'increment' и 'decrement', которые либо увеличивают, либо уменьшают счетчик на 1. Если редьюсер получает неожиданное действие, он выдает ошибку.
Чтобы использовать counterReducer в функциональном компоненте, мы можем использовать хук useReducer:
import React, { useReducer } from 'react';
function Counter() {
const [state, dispatch] = useReducer(counterReducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
В этом примере мы используем хук useReducer для инициализации состояния до { count: 0 } и для настройки функции dispatch, которая используется для отправки действий редюсеру. Когда пользователь нажимает кнопку + или -, мы вызываем dispatch с соответствующим действием ({ type: 'increment' } или { type: 'decrement' }). Затем редюсер обновляет состояние в зависимости от действия, и компонент перерисовывается с новым состоянием.
