Управляйте сложным внутренним состоянием с помощью Reducer Hook

В одном из моих предыдущих постов я повторно реализовал простой компонент класса делать в функциональный компонент с useState и useEffect хуками.

Как уже отмечалось, этот случай является хорошим примером использования useReducer вместо useState.

Согласно официальной документации, useReducer это:

альтернатива useState. Принимает редуктор типа (state, action) => newState и возвращает текущее состояние в паре с методом dispatch.

и работает точно как редуктор в Redux. В статье также упоминается, что:

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

Замена функций управления состоянием редуктором

Компонент «сделать» на самом деле может использовать отдельные методы для управления состоянием. Например, это была функция для добавления нового элемента в список:

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

Обновление ссылок на состояние и средства определения состояния

Несколько вызовов useState теперь можно заменить одним вызовом useReducer:

Отсюда любой вызов set... функций должен быть заменен отправкой действия, например:

Резюме

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

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

Взглянем на окончательный код:

Подробнее о крючках

Эта статья - третья часть моей короткой серии о React Hooks: