Advanced ReactJS: Кращі практики для React + Redux + Sagas

кава для роздумів

Перш за все, швидке введення в те, що таке React. Це бібліотека JavaScript, яка використовується для побудови інтерфейсів користувача. Він змінив передовий ландшафт розвитку з моменту появи. Отже, якщо ви прагнете бути передовим веб-бібліотекою для навчальних розробників, як React або Vue.js, це майже важливо для сьогоднішньої галузі. Ось чудовий підручник, якщо ви тільки починаєте вивчати Реагувати. https://reactjs.org/tutorial/tutorial.html.

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

Однак я завжди намагався знайти підручник, який поєднує всі вдосконалені концепції Реагу в один компактний підручник.

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

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

Цільова сторінка програми

Вище видно відображений стан підрахунку та чотири кнопки, які запускають відповідні дії. Їх дії само собою пояснюються.

селектори

Перейдіть до файлу selectors.js всередині контейнера Counter, перша вдосконалена концепція, яку ми тут вирішуємо, - createSelector. Подивившись на код, по-перше, змінна count const отримує стан підрахунку всередині дерева редукційних станів за допомогою state.get ('count').

Потім ми створюємо селектор, використовуючи зазначений метод. Це допомагає нам відформатувати стан / дані, які ми отримуємо з дерева резервного стану, і цим чином ми економимо багато часу, кодуючи нові функції, які обробляють реструктуризацію стану або форматування цільового стану кожного разу, коли нам це потрібно, щоб зробити щось переднє -закінчити. У цьому прикладі я не змінив стан, який я отримав. Я просто повернув звичайний стан для демонстраційних цілей.

Потім отримана функція буде використовуватися всередині mapStateToProps, а з mapStateToProps, природно, наступне, що потрібно налаштувати, це mapDispatchToProps.

створювати дії

Щоразу, коли диспетчеризація дій редуктора, нам завжди потрібно оголосити його тип та відповідний регістр перемикача на редуктор, який він введе пізніше, щоб змінити стан програми. За допомогою пакету createActions з редукційного соусу ми можемо вдарити двох птахів одним каменем. Ми також повинні відформатувати редуктор з reduxsauce, щоб повністю використати цей пакет.

редуктор

Вище є редуктор нашого додатка. Початковий стан додається API відJS від непорушного і, як застосовується назва пакета, він захищає початковий стан від мутації. Реакція дуже сувора з цією концепцією, тому завжди пам’ятайте про це. API createReducer від reduxsauce має два аргументи.

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

редукційна сага

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

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

розщеплення коду

Розбиття коду - це чудовий спосіб поліпшити продуктивність веб-додатків. Код JavaScript бере найбільшу кількість даних користувачів. Пам’ятайте, що, таким чином, при розбитті коду, він дозволяє кінцевому користувачу завантажити лише ту частину коду, яка потрібна для ефективності споживання даних.

На закінчення

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

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

Це завжди дрібниці.

З цим я сподіваюся, що я допоміг тобі в подальшому розумінні Реагувати з цією невеликою статтею. Ура!