В контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.
Текущее состояние (state
)
Действие (action
)
const reducer = (state, action) => {
switch (action.type) {
case 'ACTION_TYPE':
// Возвращаем новое состояние
return {
...state,
// Обновляем определенные свойства
};
default:
return state;
}
};
Инициализация состояния
const initialState = {
count: 0
};
Определение редьюсера
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'DECREMENT':
return {
...state,
count: state.count - 1
};
default:
return state;
}
};
React предоставляет хук
useReducer
для управления состоянием с помощью редьюсера в функциональных компонентах.import React, { useReducer } from 'react';
const initialState = { count: 0 };
const counterReducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(counterReducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
export default Counter;
Ставь 👍 и забирай 📚 Базу знаний