Чим замінити Redux у 2021 році

6 хв. читання

Якщо ви створюєте або плануєте створити застосунок на React, то маєте обрати спосіб динамічної обробки станів. І тут від розмаїття очі розбігаються. Зараз розвиток засобів керування станами зараз трохи повільніший, ніж був у 2014 році, під час піку їхньої розробки, але досі залишається безліч стабільних і передових альтернатив.

Redux є лідером ринку вже багато років. Та вибір є досить широкий: завдяки розробкам як самого React, так і конкурентних технологій.

У цій статті ми ознайомимось з різними підходами, які дозволять швидко писати легкі для підтримки, тестування та розуміння застосунки.

#1: Просто React

Перш ніж говорити про альтернативні шляхи обробки станів, маємо для вас ще один пазлик, яким варто доповнити картину. React постачається з усіма необхідними засобами обробки станів та дає раду з цим без жодної бібліотеки.

Коли Redux був царем гори, багато команд помістили Кожен. Окремий. Обробник. Стану. в Redux. І для спадних меню, і для відкриття сторінок, і навіть для введених до поля форми даних. Озираючись на ті часи, це був досить невдалий підхід. Навіть якщо ідея централізації всіх станів у одному місці звучить грандіозно (наприклад, так робить архітектура Elm), здебільшого такий підхід здається замудрованим.

А все тому, що більшість станів не потрібно обробляти глобально. Зазвичай стани чудово обробляються за допомогою useState, useReducer або кастомних хуків разом з вашими компонентами. Ви можете заглиблюватися на один рівень компонентна або на два за допомогою властивостей, можете створювати власні контексти, щоб уникнути проблем. Подекуди це не працюватиме через обмеження продуктивності, але це радше виняток.

Тому перед тим як зануритися у світ розширеного керування станами, подумайте про застосування стандартних інструментів React.

#2: React + SWR || React-Query

Багато хто додає Redux для передачі станів до інших застосунків. Дані отримуються одразу, але не оновлюються впродовж якогось часу. Redux і його thunk виконують ці завдання досить просто, але надто вже морочливо їх налаштовувати.

Більшість даних, які вам потрібно передати до інших своїх застосунків, поділяються на дві категорії. Кеш сервера та глобальний стан. Кеш сервера або дані, які ви повинні запитувати у сервера, розмістити на якомусь пристрої керування станом і отримати пізніше, — їх можна відокремити від глобального стану, оскільки він не генерується користувачем в такий самий спосіб.

Сьогодні існує кілька бібліотек, які допомагають вам з кешем сервера. React Query — найпопулярніша альтернатива, а SWR — особистий улюбленець автора. Вони обидва мають дуже схожий API, кешують запити вашого сервера та забезпечують розумні стандартні значення для повторного отримання цих даних у фоновому режимі. Ви можете налаштувати все для власних потреб та надсилати у запитах таємні дані, як-от токени OAuth. А ще стани завантаження та помилок або позначаються через логічні прапорці, або обробляються у блоках помилок та suspense (якщо ви працюєте з версію React, яка це підтримує).

Якщо ви використовуєте одну з цих бібліотек для обробки всіх станів сервера, то можете обробляти будь-який стан, не пов'язаний із сервером, за допомогою контекстів або локального стану. Здебільшого обробляти потрібно не надто багато станів.

#3: Набір інструментів Redux

Багато людей справді часто застосовують Redux — і недарма. Redux постачається з чудовими інструментами для розробників, з надійною односторонньою передачею даних та з якісною документацією. То чи можна користуватися всіма наявними знаннями та набором інструментів, але без шаблонів і в обхід звичайного Redux?

RTK, або REDUX TOOLKIT, — це часто застосовувана бібліотека, яка спрощує роботу з кодом Redux та робить її не такою шаблонною. RTK використовує правила для спрощення методів reduce, асинхронних зв'язків та розміщення створеного, а бібліотека immer спрощує процес зміни станів.

RTK пожвавив спільноту Redux і його активно підтримують супровідники Redux. Якщо ви плануєте обрати Redux, то RTK, безумовно, найкращий спосіб зробити це у 2021 році.

#4: Recoil

Recoil — це новий засіб керування станами від Facebook, він продовжує активно розвиватися. Розроблений спеціально для React, Recoil допомагає зробити обробку змін у компонентах простішою за вечірню прогулянку.

Кожна частинка змін називається атомом. Атоми можуть бути об'єднані з селекторами, які здійснюють оновлення, лише якщо відбулися зміни в атомі. Асинхронність вбудована, тому будь-яке оновлення стану може залежати від зв'язку з сервером або подій, що відбуваються у вебворкерах. Тож ви можете зібрати атоми в будь-яку структуру даних (дерева, графіки тощо). Іншими словами — Recoil потужний!

Документація просто чудова, а API починає ставати справді стабільним. Якщо вам потрібен дійсно ефективний обробник зміни станів у вашому застосунку, то цей інструмент чудово підійде. Вимірюємо швидкодію клієнтської частини

І на додачу

Керування станами досить складне і є безліч інших шляхів розв'язувати ті самі проблеми. Ось ще два варіанти, якщо ви хочете дізнатися про інші способи керування станами у React.

MobX

MobX існує давно, його обрали тисячі команд розробників з усього світу для керування станами у своїх застосунках. MOBX робить всі стани «помітними». Докладніше про цей підхід у їхній документації.

Overmind

Overmind є ще одним новим підходом до керування станами, який дозволяє легко оркеструвати досить складними змінами станів. Один з найкращих онлайн-інструментів — CodeSandbox — застосовує Overmind і дуже добре про нього відгукується. Якщо у вас дійсно складні сценарії керування станами, Overmind може стати вашим вибором.

Підсумок

Знайти найкращий спосіб для обробки станів у React-застосунках — це одне з найважливіших рішень розробників. Користуватися стандартним набором засобів React чи випробуваними й перевіреними додатковими бібліотеками? А якщо спробувати щось передове, що працюватиме найкраще?

Під час вибору вам слід врахувати, хто буде працювати над вашим кодом, рівень їхньої компетентності, складність сфери застосування та вашого витвору. Подумайте також про складність переходу і обмеження, пов'язані з цим.

Автор статті зазвичай обирає React з SWR для керування станами. Він попрацював з Recoil впродовж кількох місяців і ним теж був задоволений. Але що б ви не обрали, переконайтеся, що цей інструмент для вас зручний.

Успіхів!

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація