Advanced ReactJS: лучшие практики для React + Redux + Sagas

кофе для размышлений

Перво-наперво, краткое введение в то, что такое React. Это библиотека JavaScript, используемая для создания пользовательских интерфейсов. С тех пор, как он появился, он изменил внешний интерфейс. Так что, если вы стремитесь стать передовым веб-разработчиком, такие библиотеки, как React или Vue.js, практически необходимы в современной индустрии. Вот отличный учебник, если вы только начинаете изучать React. https://reactjs.org/tutorial/tutorial.html.

Я помню, когда я начал изучать React. У меня всегда было тревожное чувство, что я никогда не смогу выучить все, что мне нужно, постоянно меняющийся язык JavaScript, нависший над моей головой, и если я когда-нибудь что-то получу правильно, я всегда буду спрашивать себя, действительно ли это лучший способ сделать это? После буквально сотен онлайн-уроков, поиска на Youtube и незавершенных (и, скорее всего, немытых) чашек кофе я наконец-то твердо понял, что React пытается внести в таблицу JavaScript.

Тем не менее, я всегда изо всех сил пытался найти учебник, который объединяет все передовые концепции React в одном компактном учебнике.

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

Достаточно с болтовней. Давайте поговорим код. Загрузите готовый код из этого репозитория и следуйте инструкциям README, чтобы вы могли увидеть и почувствовать, что мы собираемся построить здесь. https://github.com/jelorivera08/react-starter-pack.

Целевая страница приложения

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

селекторы

Перейдите к файлу selectors.js внутри контейнера Counter, первой продвинутой концепцией, которую мы здесь рассмотрим, является createSelector. Посмотрев на код, во-первых, переменная подсчета const извлекает состояние подсчета в дереве состояний избыточности, используя state.get («count»).

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

Затем результирующая функция будет использоваться внутри mapStateToProps, и с mapStateToProps, естественно, следующая вещь, которую нужно настроить, это mapDispatchToProps.

создавать действия

Когда бы ни отправлялись действия редуктора, мы всегда должны объявлять его тип и соответствующий регистр переключения для редуктора, который он введет позже, чтобы изменить состояние приложения. С пакетом createActions от reduxsauce, мы можем поразить двух зайцев одним выстрелом. Мы также должны отформатировать редуктор с нужным соусом, чтобы в полной мере воспользоваться этим пакетом.

редуктор

Выше - редуктор нашего приложения. Начальное состояние заключено в API fromJS из неизменяемого и, поскольку применяется имя пакета, оно защищает исходное состояние от изменения. Реагируйте очень строго с этой концепцией, поэтому всегда помните об этом. API createReducer из reduxsauce имеет два аргумента.

Сначала начальное состояние. Во-вторых, объект, который имеет ключи для типов действий и значений в качестве функции, которую редуктор сработает, когда тип соответствует вызову диспетчеризации. Таким образом, Merge соответствующим образом изменяет редуксное дерево состояний. Нет реального приложения, которое не знает, как правильно обрабатывать асинхронные вызовы API? Правильно.

Редукса Сага

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

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

разделение кода

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

В заключение,

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

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

Это всегда мелочи.

В этом, я надеюсь, я помог вам лучше понять React в этой небольшой статье. Ура!