Хук useReducer: упрощение управления состоянием в React

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

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

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

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

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

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

Синтаксис использованияuseReducerХук такой:

useReducerфункция принимает два аргумента:

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

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

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

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

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

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

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

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

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

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

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

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

Функция диспетчеризации, предоставляемаяuseReducer