![](https://habrastorage.org/getpro/habr/upload_files/170/f6d/04f/170f6d04f85e8aca9be0d98ceafae9e4.png)
useReducer - это хук для работы с состоянием компонента. Он используется под капотом у хука useState. В этой статье разберемся с api useReducer, когда лучше использовать useReducer вместо useState и поговорим про нестандартный случай использования useReducer.
useReducer api
useReducer - это хук для работы с состоянием компонента, как уже говорил выше. Чтобы его использовать, необходимо написать чистую функцию reducer
(редуктор). Также useReducer принимает от 2-х до 3-х аргументов.
В минимальном рабочем варианте, он принимает reducer
и начальное значение состояния.
Функция reducer, в свою очередь, принимает два аргумента: предыдущее состояние и экшн (действие) и обязательно возвращает новое состояние.
import React, { FC, useReducer } from 'react';
export type BaseExampleProps = {
className?: string;
};
type State = {
text: string;
};
type Action = {
type: 'test';
};
// Чистая функция, принимает предыдущее значение состояния и экшн, с помощью
// которого изменим состояние
const reducer = (state: State, action: Action): State => {
const { type } = action;
switch (type) {
case 'test':
return { ...state, text: 'test' };
default:
return state;
}
};
export const BaseExample: FC<BaseExampleProps> = () => {
const [store, dispatch] = useReducer(reducer, { text: '' });
return (
<div>
<div>{state.text}</div>
<div>
<button type="button" onClick={() => dispatch({ type: 'test' })}>
test
</button>
</div>
</div>
);
};
Данный хук использует концепцию, схожую с flux
архитектурой (об этом ниже). Редуктор (reducer
) принимает предыдущее состояние и экшн, в котором есть обязательное поле type
и необязательное payload
.
type StandartAction = {
type: string;
payload?: any;
}
Классический редуктор выглядит как-то так:
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + action.payload };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
В случае выше тип экшн будет выглядеть вот так:
type Action = {
type: 'INCREMENT';
payload: number;
} | {
type: 'DECREMENT';
}
Обращаю ваше внимание, что данных подход - является рекомендацией, связан в flux архитектурой. Технически мы может отходить от данного шаблона и в конце статьи обсудим, когда это допустимо и как использовать.
Пара слов про архитектуру Flux
Архитектура Flux - это паттерн управления состоянием, разработанный Facebook для создания масштабируемых и управляемых приложений на React. Он был создан в ответ на проблемы, возникающие при управлении состоянием в сложных приложениях.
Основные компоненты архитектуры Flux:
1. Действия (Actions): Действия представляют собой объекты, которые описывают события или изменения, происходящие в приложении. Они инициируются различными событиями, такими как пользовательские действия, сетевые ответы и т. д. Действия содержат информацию о типе события и необходимых данных для обработки этого события.
2. Диспетчер (Dispatcher): Диспетчер является центральным хабом в архитектуре Flux. Он принимает действия и передает их зарегистрированным обработчикам (stores). Диспетчер также гарантирует, что действия обрабатываются последовательно и синхронно, что позволяет избежать состояния гонки.
3. Хранилища (Stores): Хранилища содержат состояние приложения и логику его обновления. Они реагируют на действия, обновляют состояние и уведомляют своих подписчиков о изменениях. Каждое хранилище отвечает за управление определенной частью данных приложения и имеет строгую структуру состояния.
4. Представления (Views): Представления (компоненты) React отображают состояние приложения и реагируют на его изменения. Они подписываются на хранилища для получения обновлений и перерисовки себя при изменении состояния. Представления также инициируют действия при пользовательском взаимодействии.
5. Единство данных (Unidirectional Data Flow): Flux использует однонаправленный поток данных, где изменения состояния могут происходить только путем действий, передаваемых через диспетчер и обрабатываемых хранилищами. Это упрощает отслеживание и отладку потоков данных в приложении.
Преимущества Flux:
Четкая структура: Flux обеспечивает четкую организацию кода и распределение ответственности между различными компонентами.
Отсутствие зависимостей: Компоненты в Flux взаимодействуют друг с другом через действия и хранилища, что позволяет избежать сложностей связанности.
Легкая отладка: Однонаправленный поток данных и строгий контроль изменения состояния упрощают обнаружение и исправление ошибок в коде.
Масштабируемость: Flux облегчает масштабирование приложений, поскольку разделение ответственности между компонентами позволяет эффективно управлять состоянием и логикой приложения.
В целом, архитектура Flux предлагает структурированный подход к управлению состоянием в React-приложениях, упрощая разработку и поддержку сложных приложений.
Результат вызова useReducer
useReducer, как и любой хук, является функцией. Этот хук возвращает массив с двумя элементами. Первый элемент массива - состояние, второй элемент - функция изменения состояния. Классически именуют так:
store
либоstate
(состояние)dispatch
(функция изменения состояния)
const [store, dispatch] = useReducer(...);
Обращаю внимание, что деструктуризация массивов позволяет именовать как угодно, например так
const [count, increment] = useReducer(...);
Связь reducer и dispatch
Dispatch (функция, изменяющая состояние), использует reducer под капотом. Выглядит это примерно так:
const dispatch = (action) => {
reducer(state, action);
};
Другими словами, вся логика описанная внутри reducer
, будет выполнена при вызове dispatch
, а единственный аргумент, который принимает dispatch
и будет action
.
Как не обновлять компонент при вызове dispatch. В react 18 не работает!
Бывают ситуации, когда при определенных условиях обновлять компонент не надо. Эту логику можно обработать в редукторе (reducer), но есть нюансы.
Чтобы не обновлять компонент в reducer нужно вернуть предыдущее состояние. Но это работает только для react 17 версии! В react 18 версии компонент будет обновлен в любом случае при вызове dispatch. На текущий момент актуальная версия react 18.0.2.
const reducer = (state, action) => {
switch (action.type) {
...
default:
// в react17 компонент не будет обновлен
// в react18 компонент будет обновлен
return state;
}
};
Следить за исправлением (если оно будет) здесь. Разработчики уверяют, что это не приведет к проблемам с производительностью (под вопросом).
Аргументы useReducer
Как говорилось выше, useReducer принимает от 2-х до 3-х аргументов.
Если заглянуть в типизацию этого хука, можно увидеть несколько вариантов, ужаснуться и закрыть.
![](https://habrastorage.org/getpro/habr/upload_files/d51/c2f/b48/d51c2fb487bb214f2d337c1782890ce9.png)
![](https://habrastorage.org/getpro/habr/upload_files/ff6/951/620/ff6951620e7baab650c236e1eb16cf27.png)
![](https://habrastorage.org/getpro/habr/upload_files/32b/1f9/c4b/32b1f9c4b9e9fb4475bf0e8f23558a76.png)
![](https://habrastorage.org/getpro/habr/upload_files/a49/d8a/8c1/a49d8a8c17958ef91feab75b424bd8a1.png)
![](https://habrastorage.org/getpro/habr/upload_files/bec/999/348/bec999348b125b6119b0a24b3c532cbe.png)
Но на самом деле, здесь нет ничего сложного. Давайте разбираться.
Функция редуктор (reducer) в любом случае будет первым аргументом.
Вторым аргументом будут некоторые данные (initialiserArg или initialState). Обязательный. Если мы передали только два аргумента - эти данные будут начальным состоянием. Если передали три аргумента - эти данные будут переданы в третий аргумент useReducer.
Третий аргумент необязательный (initialiser) - это функция, которая будет вызвана единственный раз при монтировании компонента и она должна вернуть начальное значение состояния. Как говорилось выше, эта функция в качестве своего аргумента получит второй аргумент useReducer, это позволяет функцию initialiser вынести из компонента. Смысл этой функции в оптимизации. Если начальное состояние нужно вычислить, лучше использовать эту функцию, иначе при каждом обновлении компонента будете вычислять начальное состояние, но никак его не использовать.
useReducer(reducer, initialState);
useReducer(reducer, undefined, () => initialState);
useReducer(reducer, arg, (arg) => initialState);
Когда использовать useReducer
Не существует строгого правила, когда нужно использовать useState, а когда useReducer. Но есть некоторые признаки, по которым можно понять, что стоит попробовать useReducer.
Когда в компоненте есть несколько useState, в целях оптимизации можно заменить их единственным useReducer. Меньше хуков, меньше затрат памяти, больше производительность. Однако это зависит от приоритетов. useReducer может потребовать написать много
action
и это может негативно сказаться на читабельности кода.Если одно состояние зависит от другого, это с большой вероятностью работа для useReducer. Все зависимости одного состояния от другого лучше описывать в редукторе (reducer)
const [state1, setState1] = useState();
const [state2, setState2] = useState();
// В данном случае лучше использовать useReducer
useEffect(() => {
if (state1 === any) setState2();
}, []);
Нестандартное использование
Выше мы обсуждали, что useReducer основан на коцепции flux и существует договоренность, что в dispatch передаем action типа { type: string; payload: any }
. Однако технически нет никаких ограничений использовать другие данные и ниже хочу показать два варианта использования useReducer для частых кейсов.
Переключатель с использованием useReducer
Часто нужно создать переключатель boolean
состояния (visible
например). В случае, если нам нужна замемоизированная функция переключения (toggleVisible
) код будет выглядеть следующим образом.
const [visible, setVisible] = useState(false);
const toggleVisible = useCallback(() => setVisible(v => !v));
Однако этот код можно сократить до одной строчки с помощью useReducer
const [visible, toggleVisible] = useReducer((v) => !v, false);
Функция dispatch (в данном случае toggleVisible), будет стабильной ссылкой (замемоизирована). Так мы получаем оптимизированный код, да еще и в одну строчку.
Счетчик с использованием useReducer
Аналогично, как и в примере выше, можно сделать увеличение счетчика.
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(v => v + 1));
C помощью useReducer
const [count, increment] = useReducer((v) => v + 1, 0);
Также можно сделать увеличение счетчика на заданное количество.
const [count, increment] = useReducer((v, amount = 1) => v + amount, 0);
increment() // увеличит на 1
increment(10) // увеличит на 10
increment(-10) // уменьшит на 10
onChange на useReducer
Часто нужно писать подобный код
const [value, setValue] = useState('');
const onChange = useCallback((e: React.ChangeEvent) => setValue(e.target.value));
Этот код также можно написать с использованием useReducer
const [value, onChange] = useReducer((_, e) => e.target.value);
Итоги
useReducer - это истинный хук изменения состояния (useState под капотом использует useReducer). Данный хук основывается на архитектуре flux, поэтому принимает редуктор (reducer) и предоставляет dispatch (функция изменения состояния), который в свою очередь принимает action.
Если в коде есть несколько useState и одно состояние зависит от другого - это верный признак, что лучше использовать useReducer. Можно отойти от классического использования useReducer и использовать для создания переключателей, счетчиков, состояния инпутов и вообще всего, на что хватит фантазии.
Напоследок хочу пригласить всех желающих на бесплатный урок курса React.js Developer. Фуллстек разработка с SSR никогда не была такой простой и доступной! На уроке вы научитесь бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью. На примере разберем настройку сборки, процесс разработки и развертывания приложения. Вы получите удобный набор для старта разработки любого веб-приложения на современном стеке.