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 можем да ударим две птици с един камък. Трябва също така да форматираме редуктора с reduxsauce, за да се възползваме напълно от този пакет.

редуктор

По-горе е редукторът на нашето приложение Първоначалното състояние е затворено от API на JJS от неизменяем и тъй като името на пакета се прилага, защитава първоначалното състояние от мутация. React е много строг с тази концепция, така че винаги имайте това предвид. API на createReducer от reduxsauce има два аргумента.

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

редукс сага

Ето сага част от нашата програма. Всичко е същото, освен начина, по който наричаме нашите действия. Ние използваме типовото действие, което сме създали по-рано и ги използваме в нашата сага за гледане, за да изпратим асинхронни обаждания, които по-късно ще повлияят на нашето дърво на редукционните състояния.

Забавянето е там, за да се подиграва на мрежовата латентност за много по-добро чувство на асинхрон на приложението. О, и накрая, нека се уверим, че не забравяме за представянето.

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

Разделянето на кода е чудесен начин за подобряване на производителността на уеб приложенията. JavaScript кодът взема най-много такса за данните на потребителя. Не забравяйте, че така, с разделянето на кода, той позволява на крайния потребител да изтегли само частта от кода, която му е необходима за ефективност на потреблението на данни.

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

Има много пакети и инструменти, които ни помагат, софтуерните инженери да създадем по-чист и много по-ефективен код. идва с цена, цената за разбиране на основната система и това е мисленето в React.

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

Винаги са малките неща.

С това се надявам да ви помогна за по-нататъшното разбиране на React с тази малка статия. Наздраве!