igor_zvyagin 7 авг 2023 в 15:04

React useReducer, зачем нужен и как использовать

Средний

7 мин

20K

Туториал

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-х аргументов.

Если заглянуть в типизацию этого хука, можно увидеть несколько вариантов, ужаснуться и закрыть.

Но на самом деле, здесь нет ничего сложного. Давайте разбираться.

Функция редуктор (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 никогда не была такой простой и доступной! На уроке вы научитесь бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью. На примере разберем настройку сборки, процесс разработки и развертывания приложения. Вы получите удобный набор для старта разработки любого веб-приложения на современном стеке.

Зарегистрироваться на бесплатный урок

Теги:

Хабы: