Нужны ли нам по-прежнему фреймворки управления состоянием, такие как Redux и MobX?
Вступление
Введение хуков React, безусловно, изменило взгляд на управление состоянием.
До того, как у нас появилась эта функция, было трудно разделить логику состояния между компонентами. Теперь это так же просто, как сделать для него абстрактный крючок (пример: useUserLogin).
Возникает вопрос, а зачем нам еще нужны фреймворки государственного управления? В этой статье я опишу свой процесс принятия решений о том, где хранить state. Также поделюсь своим мнением о том, нужны ли нам еще рамки государственного управления в 2020 году.
Что изменилось?
Итак, как мы определяли состояние до хуков? По сути, было два варианта: определение локального состояния в компоненте или использование структуры управления состоянием, чтобы установить его как глобальное состояние (например, MobX / Redux).
Локальное состояние (до хуков)
Проблема с наличием только этих двух параметров лучше всего описана в следующем сценарии. Допустим, наше состояние не обязательно должно быть глобальным, но мы можем захотеть повторно использовать то, как мы определяем локальное состояние в нескольких компонентах.
В приведенном выше примере мы можем захотеть повторно использовать настройку состояния загрузки и ошибки - до хуков это было невозможно. Единственный вариант, который у нас был, - это сделать его многоразовым с Redux. В Redux каждый компонент, который хотел искать пользователей, мог просто отправить действие (searchUsers()) и ожидать изменения глобального состояния.
Однако использование этого глобального состояния (Redux / MobX) приводит к нескольким проблемам:
- Больше шаблонного кода
- Сложный поток
- Несколько компонентов манипулируют глобальным состоянием, что может вызвать нежелательные побочные эффекты.
Решение: React Hooks!
К счастью, React представил ловушку в React 16.8. С этого дня стало возможным разделять логику состояния между несколькими компонентами.
В приведенном ниже примере мы теперь можем поделиться поведением загрузки и ошибки:
Бонус: мы также могли бы создать useUserSearch, если бы несколько компонентов хотели предложить функцию поиска по списку пользователей.
Однако крючки - не серебряная пуля. Сохранение состояния в хуке не означает, что он становится одноэлементным, состояние привязано только к одному компоненту. В некоторых случаях нам может понадобиться сохранить только один экземпляр состояния (например, получение информации о пользователе только один раз). Вот где структура государственного управления доказывает свою ценность.
Как решить, где сохранить состояние
Теперь, когда стало возможным разделять логику состояния между компонентами, как нам выбрать между сохранением состояния в компонентах (локальном) или в структуре управления состоянием (глобальном)?
Ниже представлено изображение моего процесса принятия решений.
Какая польза от системы государственного управления?
Теперь мы знаем, когда выбирать между глобальным и локальным состоянием. Но зачем нам все еще использовать структуру государственного управления в 2020 году? В чем преимущество использования React Hooks выше?
Вот список преимуществ:
- Определено глобально, что означает только один экземпляр данных.
- Только получение удаленных данных один раз
- Обширные инструменты разработки
- Обеспечивает стандартизированный способ работы для инженеров-программистов.
Заключение
Мы видели, что React Hooks полностью изменил ландшафт управления состоянием. С момента их появления стало проще разделять логику состояния между компонентами.
Однако хуки - не серебряная пуля, и нам все равно могут понадобиться фреймворки управления состоянием. Это не означает, что нам нужно сохранять каждое состояние глобально - в большинстве случаев лучше сохранять его на уровне компонентов. Перенос состояния в структуру управления состоянием следует производить только в случае крайней необходимости.
