Стан дыярэгі па трымце жыцця: калі React Portal насправды патрабуе глобальны склад

Команды, які ствараюць внутрашні порталы, частаў пачынаюць дыскусію з запитання «Redux чы Зустанд?». Болей корыстным першым запитаннем є тое, якіе элементы стану насправды патрабуюць быць глобальнымі. У этай статыце показана, як класіфікацаваць стан портала за тым, хто яго керуе і як дазолены ён застаўся, чаму размешчэнне тыктагочасовага стану ў глобальным хранільніку стварае постаўлены поток багоў, зв’язаных з чысткай, і калі глобальная бібліятэка є правым рашэнням.

Большасць стану портала ёсць тыктагочасовая

Порталы зазвычай являюць сабою сукупнасць адзінаковых рабочых процэсаў. Пользователь ачынае сторунку, шукае чы вырабляе змяны, завершае задачу і пераходзіць да іншага роздзела прыемліка. Значэнні форм, фільтры, выбраныя рядкі таблыцы, актыўная вкладка і тое, чы ўвімкнута модальная вікна, — усе гэта належыць да той сторункі чы рабочага процэсу. Їм рэдка патрабуецца застаўляцца між калькама несувязаных маршрутаў.

Толькі невялікая група дадзеных ёсць справжна аплікацыйна-загальная:

• працоўнік, які ўвайшаў у систему;
• статус аутантыкацыі і правыя доступу;
• чынная арганізацыя або корыстувач;
• перапаказы тэмы і мовы.

Па большай частцы ўсе іншае должна застацца падалёк да функцыі, якая яе выканаўляе.

Глобальныя хранільнікі ператвараюць час выкарыстоўвання ў задачу на чысцэнне

Якщо паводзіць тымчасовы статус у Redux, Zustand, MobX або іншы глобальны хранільнік, ён перазьяўляе экран, які яго створыў. Тады патрэбны дапаможнікі коду, каб перазначыць яго пад час навігацыі, пасля адправкі даных, пад час выходу з системы, калі меняецца корыстувач і пад час будзь-кага іншага выходу. Якщо праспаць які-небудзь момент, корыстувач вяртаецца на экран, дзе будуць старыя фільтры, праканальваныя выборы або часткова заполненыя значэння формы з паканальванага візіты. Гэтыя багі важка адтворыць, таму што яны залежаць ад точнага порядку экранаў, якія візітаваў корыстувач.

Правілле, якое можна застосаваць, ўсё проста: якщо глобальны стан павінен быць вычысваны ўсё час, каб ён велічыўся як локальны стан, то, верагодна, яго трэба было з самага пачатку робіць локальным.

Выберыце самы маленькі дыяметр, який падходзіць

Паспаравайце кожны элемент стану з самым вузкім інструментам, який пакрывае весь період його існавання:

• стан компонента для поведзення UI, якое стосуецца аднаго компонента;
• React Context для стану, які дзеліцца межа адной функцыяй калькуляцыі чыста групай супакойных маршрутаў;
• параметры пошуку URL для фільтраў, пагінацыі і іншага стану навігацыі, які таксама дазволяе пераказваць відобразы і застаёцца пасля апдэйта;
• бібліятэкі серверскага стану, такія як TanStack Query, для дадзеных, якія запрашваюцца з бэкенду, адказна за кешаванне і недзейнасць дадзеных, а не вашага складу;
• глобальны склад толькі для кліентскага стану, який дзейсна є для всіяў аплікацыі.

Следует адзінаковае ўвага прыдзеліць контэксту на рэвеўні маршрутаў. Калі вы размешчаеце прадастароўкі навакол групы маршрутаў, а тую групу не падключаеце, прадастароўкі абнесліваецца, і яго стан автаматычна зникае. Жыцёвы цикл компаненту React выконвае чыстка, яку інакш быяў бы трэба напісаць вручную. Якщо прычына, якая спрабоўвае падштурхнуць вас да выкарыстоўвання стора, — это прабава перадаць пропы через многія шары, то это аднае праблема з простымія рашэннямі, пра якія пішана ў чаму проп-дрілінг не ёсць праблема для інсталлявання Redux або Zustand.

Калі глобальны стор заслуговае на свое месца

Redux, Zustand і падобныя бібліятэкі ёсць правы выбар, калі стан павінен намерна застацца актуальным на несвязаных экранах. Тыповыя прыклады включаюць:

• кошыкі для пакупак;
• складныя процесы адправкі замовленняў, якія распрастараюцца на калькі экранаў;
• чорнавіки, якія павінны застацца актуальнымі;

• Прыкладнікаі, які працуюць у режыме офлайн першыя;
• Сістэмы кароткага пісьма або прыемлень у всім прыкладніку;
• Функцыі анулювання і павторэалізацыі дзеянь;
• Функцыі рэальнага часу, дзе неабходна коордынацыя стану кліента;
• Складныя рабочыя практыкі з многама взаімазалежнымі пераходамі стану.

У такіх ситуацыях цэнтрызаваны стан рашае асалівую проблэму, а не стварае яе.

Ключовыя выводы

• Перад выборам будзь-якай бібліятэкі павінны быть вяскрава адначытаны прыналежнасць і трымкі стану.
• Стан, який належыць адной рабочай практыцы, павінен зникнуць разам з тая практыкай, жадаўна праз ад’язванне, а не праз ручныя скасаванні.
• Данные сервера трэба зберагаць у бібліятэкі запытаў, а стан навігацыі — у URL.
• Зарэзерваваць глобальны хранільнік для стану, які весь прыкладнік намеравана дзеліць з часам; ведаць, калі яго не трэба выкарыстоўваць, — частка хорашай архітэктуры.