13,8 тыс подписчиков

Управление состоянием: Jotai вместо Redux

3 минуты

63 прочтения

7 февраля 2021

Самая утомительное при реализации Redux — это написание того объёма шаблонного кода, который нужен для обработки потока данных между компонентами и хранилищем Redux. Сам Redux был создан по примеру появившейся в 2014 году архитектуры потока данных Flux.

С момента выхода React произошёл переход от компонентов класса к функциональным компонентам с хуками. Несмотря на все преимущества Redux и Flux (это замечательные инструменты), возможно, стоит задействовать новый шаблон, который в полной мере раскрывает возможности React.

Jotai — это библиотека управления состоянием для React, которая избавит вас от мучений с шаблонным кодом благодаря своему минималистичному API. Причём с Jotai никаких экшенов, редьюсеров или диспетчеров создавать не придётся!

Специфика работы Jotai очень схожа с React Context и Recoil. Быстро разобраться с ней не составит большого труда, даже если вам не знакомы эти названия, потому что эта библиотека очень проста.

Как работает Jotai

Для начала работы с Jotai первым делом нужно установить эту библиотеку:

npm install jotai
# или yarn add jotai

Jotai заменяет значения локального состояния в компонентах React на объекты atom , которые содержат часть состояния. Затем этот объект atom будет передан в хук useAtom() , чтобы компоненты могли использовать и обновлять значение, которое в тот момент будет в нём храниться. Объект atom создаётся с помощью вызова функции atom :

import { atom } from 'jotai'
const countAtom = atom(0 )
const countryAtom = atom('Japan' )

Теперь эти atom (0 и Japan ) хранятся внутри Jotai в компоненте Provider , который используется для обёртывания компонентов React:

В этом примере все компоненты, обёрнутые в Provider , теперь имеют доступ к объектам atom в Jotai и обновляют их.

Доступ к atom получается с помощью хука useAtom , возвращающего значение atom и функцию обновления. Очень похоже на хук useState() :

Вот и всё! atom вызывается из любых других компонентов, лишь бы они находились внутри Provider в дереве DOM.

По сравнению со структурой приложения React-Redux, React-Jotai намного проще. Вот как выглядит типичная структура React-Redux:

А вот простая схема, иллюстрирующая работу Jotai:

Для просмотра шаблона Jotai доступна интерактивная демо-версия . Рекомендуется выполнить объявление atom в отдельном файле: так эти atom смогут импортироваться в любые компоненты consumer .

Рефакторинг приложения на Redux для использования Jotai

Трудность выполнения рефакторинга приложения на Redux для использования Jotai зависит от сложности самого приложения. За образец возьмите эти идентичные примеры:

Выполняя рефакторинг, первым делом обычно меняют Provider в Redux на Provider в Jotai. С этого:

На этот:

Больше нет необходимости передавать store в Provider , но для замены механизма store нужно создать atoms . Если у вас в редьюсере применяется defaultState , используйте его для создания atoms :

Этот редьюсер можно заменить на простую функцию atom :

import { atom } from "jotai" ;

export const isPrimaryAtom = atom(true )

Разобравшись с той частью, что относится к Provider и Store , для завершения рефакторинга нам остаётся только заменить Dispatcher и Action . Общий шаблон Dispatcher должен выглядеть так:

Нужно заменить импорт на useAtom из Jotai и для замены Dispatcher использовать возвращённое состояние из функции обновления:

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

Заключение

Jotai и Recoil прекрасно демонстрируют то, как хуки повлияли на разработку приложений на React. Несмотря на муторный шаблонный код, Redux продолжает быть самой известной библиотекой управления состоянием, потому что её преимущества весомее затрат. Но с Jotai эти преимущества теперь получают без затрат.

Тем не менее это не означает, что Redux больше не нужна. Многие годы её безуспешно пытались заменить другие инструменты управления состоянием. В случае если приложению требуется ручной контроль над тем, когда, почему и как изменяется состояние, Redux будет незаменима. С другой стороны, если вам нужен простой инструмент управления состоянием для использования этого состояния глобально, то Jotai может быть отличной альтернативой.