Avancerad ReactJS: bästa metoder för React + Redux + saga

kaffe för tanken

Första saker först, en snabb introduktion om vad som är React. Det är ett JavaScript-bibliotek som används för att bygga användargränssnitt. Det har förändrat det främsta utvecklingslandskapet sedan det kom ut. Så om du strävar efter att bli en front-end webbutvecklare är lärande bibliotek som React eller Vue.js nästan viktigt i dagens bransch. Här är en bra tutorial om du precis börjar lära dig React. https://reactjs.org/tutorial/tutorial.html.

Jag minns när jag började lära mig React. Jag har alltid haft den oroliga känslan av att jag aldrig kunde lära mig allt jag behövde, det ständigt föränderliga JavaScript-språket som trängde över mitt huvud, och om jag någonsin fick något rätt skulle jag alltid fråga mig själv, var det verkligen det bästa sättet att göra det? Efter bokstavligen hundratals onlinestudier, Youtube-sökningar och oavslutade (och sannolikt otvättade) koppar kaffe, fick jag äntligen ett fast grepp om vad React försöker ta med sig in i JavaScript-tabellen.

Jag har emellertid alltid kämpat för att hitta en tutorial som samlar alla avancerade begrepp i React i en kompakt självstudie.

Jag minns också att jag hade svårt att förstå dessa koncept när de användes i en stor källkod. Det är det gap som denna artikel försöker fylla. Avancerade verktyg och koncept är inbäddade i vår enkla app, detta är enbart för självstudieändamål och du bör inte använda dessa koncept om din app inte behöver dem.

Tillräckligt med chitchatten. Låt oss prata koden. Ladda ner den färdiga koden från denna repo och följ README så att du kan se och känna vad vi kommer att bygga här. https://github.com/jelorivera08/react-starter-pack.

Appens landningssida

Ovan kan du se räknarläget som visas och fyra knappar som utlöser deras respektive handlingar. Deras handlingar är självförklarande.

selektorer

Gå vidare till filen selectors.js i Counter-behållaren, det första avancerade konceptet vi tar upp här är createSelector. Genom att titta på koden hämtar först const-räknarvariabeln räknetillståndet i redux-tillståndsträdet med state.get (‘count’).

Sedan skapar vi en väljare med den nämnda metoden. Detta hjälper oss att formatera tillstånd / data som vi får från redux-tillståndsträdet och genom att göra detta sparar vi mycket tid på att koda nya funktioner som hanterar omstruktureringen av staten eller formaterar måltillståndet varje gång vi behöver det för att göra något framme -slutet. I det här exemplet ändrade jag inte det tillstånd jag fick. Jag har just återlämnat det vanliga tillståndet för demoändamål.

Sedan kommer den resulterande funktionen att användas inuti mapStateToProps, och med mapStateToProps är naturligtvis nästa sak att konfigurera mapDispatchToProps.

skapa åtgärder

När vi sänder reduceringsåtgärder måste vi alltid deklarera dess typ och motsvarande omkopplingsfodral till en reducerare som den kommer in senare för att ändra applikationstillståndet. Med createActions-paketet från reduxsauce kan vi slå två fåglar med en sten. Vi bör också formatera reduceraren med reduxsauce för att dra full nytta av detta paket.

Reducer

Ovan är vår app reducerare. Det initiala tillståndet är omslutet av fromJS API från immutable och eftersom paketnamnet gäller skyddar det initialtillståndet från att muteras. Reaktion är mycket strikt med detta koncept så håll alltid detta i åtanke. createReducer API från reduxsauce har två argument.

Först det initiala tillståndet. För det andra, objektet som har nycklar för handlingstyper och värden som en funktion som reduceraren avfyras när en typ matchar ett avsändningssamtal. Sammanfoga ändrar sedan reduxstatusträdet i enlighet därmed. Det finns ingen app i det verkliga livet som inte vet hur man hanterar asynkrona API-samtal, eller hur? Höger.

redux saga

Här är sagadelen av vårt program. Allt är detsamma förutom hur vi kallar våra handlingar. Vi använder oss av den typåtgärd som vi skapade tidigare och använder dem i vår vattensaga för att skicka asynkrona samtal till det som senare kommer att påverka vårt redux-tillståndsträd.

Förseningen är där för att håna nätverksstatiden för en mycket bättre asynkskänsla i appen. Åh, och slutligen, låt oss se till att vi inte glömmer prestanda.

koddelning

Koddelning är ett bra sätt att förbättra webbapplikationens prestanda. JavaScript-kod tar mest ut av användarens data. Kom ihåg att så med koddelning så låter slutanvändaren bara ladda ner den del av koden den behöver för datakonsumtionseffektivitet.

Sammanfattningsvis,

Det finns många paket och verktyg som hjälper oss, programvaruingenjörer att skapa en renare och en mycket effektivare kod. kommer med en kostnad, kostnaden för att förstå det underliggande systemet och det tänker i React.

Learning React kräver att du byter ditt kodningsparadigm till ett mycket mer annorlunda jämfört med den tidigare tankesätten för kodning i front-end. Verktygen och paketen som jag har diskuterat i den här artikeln innehåller de principer som behövs för att koda vackert och effektivt i React och det är det som gör en exceptionell utvecklare.

Det är alltid de små sakerna.

Med det hoppas jag att jag har hjälpt dig att förbättra din förståelse av React med denna lilla artikel. Skål!