«Волшебный» редьюсер: еще один подход к управлению состоянием в React

Волшебный редьюсер: еще один подход к управлению состоянием в React

Или интересное упрощение чего-то наболевшего

Изучение управления состоянием для приложений React (и Javascript) приводит к двум основным подходам: Redux (с его аналогичными библиотеками, такими как X-State, Recoil и MobX) и домашнее решение с использованием React hook useReducer and Context API. . В последнем Context действует как механизм внедрения зависимостей, который распространяет состояние в пределах границ приложения, в то время как редьюсеры удерживают логику перехода через действия, представленные типизацией их переходов. Например, получение пользователя из API приведет к трем типам: USERS_REQUESTING, в котором запрос начнет указывать время загрузки интерфейса; USERS_REQUESTED после успешного ответа от конечной точки или USERS_FAILED при неудачном запросе. Все эти типизации представляют собой действие внутри логики редуктора, которое необходимо явно закодировать.

При любом подходе наиболее применяемым паттерном является паттерн потока, в котором изменения состояния контролируются (прото) конечным автоматом и его четко определенными переходами. Само состояние выделяется в объекте, служащем единственным и единственным источником истины. Только переходы могут вносить изменения в состояние, никогда объект состояния не изменяется напрямую логикой приложения.

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

Теперь давайте посмотрим на ту же логику, но с использованием более простого подхода, волшебного редуктора:

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

Бесплатного обеда, конечно же, нет. Если вы не будете осторожны, логика перехода может быть разбросана по кодовой базе. В конечном итоге это во многом зависит от инженера и архитектурной организации.

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