Хук useReducer — один из лучших вариантов управления состоянием в React. Начните свое путешествие с помощью хука useReducer, используя это руководство.

Управление состоянием имеет решающее значение в разработке React, выступая в качестве краеугольного камня для обработки и обновления данных в пользовательских интерфейсах. Реагировать использование состояния Хук обеспечивает простой подход к управлению состоянием, но он становится громоздким со сложным состоянием. Вот где использованиередьюсер Входит Крюк.

использованиередьюсер Hook предлагает структурированную методологию управления сложными состояниями и переходами. Охватывая использованиередьюсер Hook открывает гибкость и эффективность, что приводит к более чистому коду.

Понимание хука useReducer

использованиередьюсер Hook — это встроенная функция, предоставляемая React, которая упрощает управление состоянием, придерживаясь принципов шаблона редуктора. Он предлагает вам организованную и масштабируемую альтернативу использование состояния Хук, особенно подходящий для обработки сложных состояний.

instagram viewer

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

Эта функция принимает текущее состояние и действие в качестве входных данных, впоследствии создавая новое состояние. Он работает по тем же принципам, что и функция редьюсера, используемая в JavaScript. Массив.прототип.уменьшить() метод.

Синтаксис и пример использования хука useReducer

Синтаксис использования использованиередьюсер Крючок следующий:

константа [состояние, отправка] = useReducer (редуктор, initialState);

использованиередьюсер функция принимает два аргумента:

  • редуктор (функция): определяет способ обновления состояния на основе текущего состояния и отправленного действия.
  • начальное состояние (любое): представляет начальное значение состояния для компонента.

При вызове использованиередьюсер Хук возвращает массив, состоящий из двух элементов:

  • состояние (любое): Обозначает текущее значение состояния.
  • диспетчеризация (функция): Эта функция позволяет диспетчеризировать действия для обновления состояния.

Рассмотрим приведенный ниже пример, иллюстрирующий использование использованиередьюсер Хук в управлении простым счетчиком:

Импортировать Реагируйте, {useReducer} от«реагировать»;
константа начальное состояние = 0;
константа редуктор = (состояние, действие) => {
выключатель (действие.тип) {
случай'приращение':
возвращаться состояние + 1;
случай'уменьшение':
возвращаться состояние - 1;
по умолчанию:
возвращаться состояние;
 }
};


константа Счетчик = () => {
константа [количество, отправка] = useReducer (редуктор, initialState);
константа дескриптор приращения = () => {
 отправлять({ тип: 'приращение' });
 };


константа дескрипторДекремент = () => {
 отправлять({ тип: 'уменьшение' });
 };


возвращаться (






};

Из приведенного выше рисунка исходное состояние 0 определяется вместе с функцией редуктора, отвечающей за обработку двух типов действий: приращение и уменьшение. Функция редуктора должным образом изменяет состояние в соответствии с указанными действиями.

Используя использованиередьюсер Хук, состояние инициализируется, и получаются как текущее значение состояния, так и функция отправки. Функция отправки впоследствии используется для запуска обновлений состояния при нажатии соответствующих кнопок.

Построение функции редуктора

Для оптимального использования использованиередьюсер Hook, вы можете создать функцию-редуктор, которая описывает, как состояние должно обновляться на основе отправленных действий. Эта функция-редуктор принимает текущее состояние и действие в качестве аргументов и возвращает новое состояние.

Как правило, редукторная функция использует условный оператор switch для обработки различных типов действий и выполнения соответствующих модификаций состояния.

Рассмотрим приведенный ниже пример функции редуктора, используемой для управления списком задач:

константа начальное состояние = [];
константа редуктор = (состояние, действие) => {
выключатель (действие.тип) {
случай'добавлять':
возвращаться [...состояние, action.payload];
случай'переключать':
возвращаться состояние.карта((делать) =>
 todo.id action.payload? { ...делать, завершенный: !todo.completed }: задача
 );
случай'удалить':
возвращаться состояние.фильтр((делать) => todo.id !== action.payload);
по умолчанию:
возвращаться состояние;
 }
};

В приведенном выше примере функция редуктора обрабатывает три различных типа действий: добавлять, переключать, и удалить. Получив добавлять действие, оно добавляет полезную нагрузку (новый элемент задачи) к состояние множество.

В случае переключать действие, оно чередует завершенный свойство элемента задачи, связанного с указанным идентификатором. удалить действие, с другой стороны, исключает элемент задачи, связанный с предоставленным идентификатором, из массива состояний.

Если ни один из типов действия не соответствует, функция редуктора возвращает текущее состояние без изменений.

Диспетчерские действия

Для выполнения обновлений состояния с помощью использованиередьюсер Крюк, диспетчеризация действий становится незаменимой. Действия представляют собой простые объекты JavaScript, которые объясняют желаемый тип модификации состояния.

Ответственность за обработку этих действий и создание последующего состояния лежит на функции редуктора.

Диспетчерская функция, предоставляемая использованиередьюсер Крючок используется для отправки действий. Он принимает объект действия в качестве аргумента, тем самым инициируя соответствующее обновление состояния.

В предыдущих примерах действия отправлялись с использованием синтаксиса отправка ({тип: 'actionType'}). Однако возможно, чтобы действия включали дополнительные данные, известные как полезная нагрузка, который предоставляет дополнительную информацию об обновлении. Например:

отправлять({ тип: 'добавлять', полезная нагрузка: { идентификатор: 1, текст: «Завершить домашнее задание», завершенный: ЛОЖЬ } });

В этом сценарии добавлять action включает в себя объект полезной нагрузки, инкапсулирующий сведения о новом элементе todo, который должен быть включен в состояние.

Управление сложным состоянием с помощью useReducer

Истинная сила использованиередьюсер Крючок заключается в его способности управлять сложными структурами состояний, охватывающими многочисленные взаимосвязанные значения и сложные переходы состояний.

Благодаря централизации логики состояния в функции редьюсера управление различными типами действий и систематическое обновление состояния становится возможным.

Рассмотрим сценарий, в котором форма реакции состоит из нескольких полей ввода. Вместо того, чтобы управлять состоянием каждого входа по отдельности через использование состояния, использованиередьюсер Крюк можно использовать для целостного управления состоянием формы.

Функция редьюсера может умело обрабатывать действия, относящиеся к модификации конкретных полей и комплексной проверке всей формы.

константа начальное состояние = {
 имя: '',
 электронная почта: '',
 пароль: '',
 isFormValid: ЛОЖЬ,
};
константа редуктор = (состояние, действие) => {
выключатель (действие.тип) {
случай'обновить поле':
возвращаться { ...состояние, [action.payload.field]: action.payload.value };
случай'проверить форму':
возвращаться { ...состояние, isFormValid: действие.полезная нагрузка };
по умолчанию:
возвращаться состояние;
 }
};

В этом примере функция редуктора обслуживает два различных типа действий: updateField и валидатеформ. updateField action облегчает модификацию определенного поля в состоянии, используя предоставленное значение.

И наоборот, валидатеформ действие обновляет isFormValid свойство на основе предоставленного результата проверки.

Используя использованиередьюсер Крюк для управления состоянием формы, все связанные состояния и действия объединены в единый объект, что упрощает понимание и обслуживание.

Сравнение useReducer с другими решениями для управления состоянием

Хотя использованиередьюсер Крюк выступает в качестве мощного инструмента для управления состоянием, жизненно важно признать его различия и компромиссы по сравнению с альтернативными решениями для управления состоянием в экосистеме React.

использование состояния

использование состояния Хука достаточно для управления простыми изолированными состояниями внутри компонента. Его синтаксис более лаконичен и прост по сравнению с использованиередьюсер. Тем не менее, для сложных состояний или переходов между состояниями использованиередьюсер обеспечивает более организованный подход.

Редукс

Redux представляет известную библиотеку управления состоянием. для React-приложений. Он придерживается аналогичного шаблона редуктора, как использованиередьюсер, но предоставляет дополнительные функции, такие как централизованное хранилище, поддержка промежуточного программного обеспечения и отладка с перемещением во времени.

Redux идеально подходит для крупномасштабных приложений, требующих сложных требований к управлению состоянием. Однако для небольших проектов или более простых потребностей управления состоянием использованиередьюсер может служить легкой и простой альтернативой.

Контекстный API

React Context API позволяет обмениваться состоянием через несколько компонентов, не прибегая к сверлению упора. В сочетании с использованиередьюсер, это может дать решение для централизованного управления состоянием.

Хотя сочетание Context API и использованиередьюсер может похвастаться значительной мощностью, это может привести к дополнительной сложности в сочетании с использованием useReducer изолированно.

Контекстный API лучше всего использовать, когда необходимо совместно использовать состояние среди глубоко вложенных компонентов или при наличии сложной иерархии компонентов. Выбор подходящего решения для управления состоянием зависит от конкретных требований конкретного приложения.

Для проектов среднего размера, использованиередьюсер может оказаться эффективной и простой альтернативой Redux или Context API.

Раскрывая простоту управления состоянием

Хук useReducer представляет собой мощный инструмент для упрощения управления состоянием в приложениях React. Придерживаясь принципов шаблона редуктора, он предлагает структурированный и масштабируемый подход к обработке сложных состояний и переходов состояний.

При использовании в тандеме с хуком useState, useReducer может служить облегченной альтернативой библиотеки, такие как Redux или Context API, особенно в контексте малых и средних проекты.