Альтернативы Redux в 2021 году

Вы создаете или планируете создать приложение React, и вам нужен способ управление состоянием? Тогда у вас большой выбор. Возможно, сцена управления состояниями успокоилась после своего взрыва в 2014 году, но по-прежнему существует множество как стабильных, так и передовых альтернатив, на которые стоит обратить внимание.

Redux был лидером рынка в течение многих лет, но благодаря развитию как самого React, так и конкурирующих технологий, появляются и более лучшие варианты.

Эта статья познакомит вас с различными подходами, которые позволят вам в кратчайшие сроки писать поддерживаемые, тестируемые и понятные приложения.

1: Просто используйте React

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

Когда Redux был на вершине своей игры, многие команды размещали Every. Single. Piece. Of. State. в Redux (все хранили в Redux). Какие выпадающие окна были открыты, на какой странице вы находились, и даже что вы вводили в поля формы. Оглядываясь назад, можно сказать, что это был довольно плохой подход. Даже если идея централизации всего состояния в одном месте звучит заманчиво (например, архитектура Elm делает это), она часто кажется чрезмерно усложненной для большинства случаев использования.

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

Поэтому прежде чем погружаться в мир продвинутого управления состояниями, подумайте об использовании инструментов, с которыми React поставляется из коробки.

2: Используйте React + SWR || React-Query

Когда я начал использовать Redux, больше всего я хотел делиться состоянием между своими компонентами - данными, которые я получил однажды, и какое-то время не хотел получать их снова. Redux и их санки (thunks) предлагали мне это сделать довольно простым способом - но было много шаблонного кода, над которым нужно было работать.

Большая часть данных, которыми вы должны поделиться в своем приложении, делится на две категории. Кеш сервера и глобальное состояние. Кэш сервера или данные, которые вы должны запросить с сервера можно сохранить в каком-либо устройстве управления состоянием и получить их позже. Такие данные могут быть отделены от глобального состояния, поскольку они не генерируются пользователем.

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

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

3: Redux Toolkit

Многие люди действительно вкладываются в использование Redux, и это неспроста. Redux поставляется с отличным инструментарием для разработчиков, надежным односторонним потоком данных и отличной документацией. Итак, есть ли способ продолжить извлекать выгоду из ваших существующих знаний и набора инструментов без всего стандартного и косвенного использования Redux?

RTK - или Redux Toolkit - это библиотека, которая значительно упрощает работу с кодом Redux и делает ее менее шаблонной. Он использует соглашения для упрощения reducer'ов, асинхронной связи и создания хранилищ, а библиотека immer упрощает изменение состояния.

RTK действительно омолодил сообщество Redux и активно поддерживается разработчиками Redux. Если вы решились на The Redux Way™ - это определенно лучший способ реализовать его в 2021 году.

4: Recoil

Recoil - это новое предложение для управления состоянием от Facebook, которое все еще активно разрабатывается. Он разработан специально для React и упрощает создание общего состояния.

Каждая часть общего состояния называется атомом, и атомы можно комбинировать с селекторами, которые пересчитываются только при изменении атома. Асинхронность встроена, поэтому любое обновление состояния может зависеть от взаимодействия с сервером или чего-то, что происходит в веб-воркерах. И вы можете структурировать свои атомы в любую структуру данных, какую захотите. Другими словами - классная штука!

Документация отличная, и API начинает становиться действительно стабильным. Если вам требуется действительно эффективное разделяемое состояние в вашем приложении, это определенно отличный инструмент.

Измерение производительности внешнего интерфейса

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

OpenReplay позволяет воспроизводить проблемы, агрегировать ошибки JS и отслеживать производительность вашего приложения. Также предлагаются плагины для отслеживания состояния вашего хранилища Redux или VueX, а также для проверки Fetch-запросов и GraphQL запросов.

Почетные упоминания

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

MobX

MobX существует уже много лет и является предпочтительным решением для управления состоянием для тысяч команд разработчиков по всему миру. Подход MobX к управлению состоянием делает все состояние «наблюдаемым». Вы можете узнать больше об их подходе в их документации.

Overmind

Overmind - еще один новый подход к управлению состоянием, который позволяет легко управлять довольно сложными мутациями состояний. Один из моих любимых онлайн-инструментов - CodeSandbox - использует Overmind, и мне есть что сказать о нем. Если у вас действительно сложные потребности в управлении состоянием, Overmind может вам помочь.

Подводя итоги

Выбор того, как управлять состоянием ваших приложений React, - одно из самых важных решений, которые вы примете. Вы хотите использовать то, с чем поставляется React, хотите ли вы использовать проверенные библиотеки, или вы хотите что-то передовое, что, кажется, отлично работает прямо сейчас?

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

Лично я предпочитаю инструменты управления состоянием React с SWR. Я работаю с Recoil несколько месяцев, и мне тоже нравится этот подход. Что бы вы ни выбрали, убедитесь в том, что вам это удобно.

Удачи!

Источник: https://blog.openreplay.com/redux-alternatives-in-2021