Geavanceerde ReactJS: Best Practices voor React + Redux + Sagas

koffie om over na te denken

Allereerst, een korte introductie over wat React is. Het is een JavaScript-bibliotheek die wordt gebruikt voor het bouwen van gebruikersinterfaces. Het heeft het front-end ontwikkelingslandschap veranderd sinds het uitkwam. Dus als u een front-end webontwikkelaar wilt zijn, zijn leerbibliotheken zoals React of Vue.js bijna essentieel in de hedendaagse industrie. Hier is een geweldige tutorial als je net begint te leren React. https://reactjs.org/tutorial/tutorial.html.

Ik herinner me dat ik React begon te leren. Ik had altijd het angstige gevoel dat ik nooit alles kon leren wat ik nodig had, de steeds veranderende JavaScript-taal die boven mijn hoofd opdoemde, en als ik ooit iets goed zou krijgen, zou ik mezelf altijd afvragen of het echt de beste manier was om het te doen? Na letterlijk honderden online tutorials, YouTube-zoekopdrachten en onafgemaakte (en waarschijnlijk ongewassen) kopjes koffie, had ik eindelijk een goed begrip van wat React in de JavaScript-tabel probeert te brengen.

Ik heb echter altijd geworsteld om een ​​tutorial te vinden die alle geavanceerde concepten van React bundelt in één compacte tutorial.

Ik herinner me ook dat ik moeite had om deze concepten te begrijpen toen ze in een grote broncode werden gebruikt. Dat is het gat dat dit artikel probeert te vullen. Geavanceerde tools en concepten zijn ingebed in onze eenvoudige app, dit is alleen voor zelfstudie en u zou deze concepten niet moeten gebruiken als uw app ze niet nodig heeft.

Genoeg met de chit-chat. Laten we praten code. Download de voltooide code van deze repo en volg de README zodat je kunt zien en voelen wat we hier gaan bouwen. https://github.com/jelorivera08/react-starter-pack.

Bestemmingspagina van de app

Hierboven ziet u de getelde status en vier knoppen die hun respectieve acties activeren. Hun acties spreken voor zichzelf.

selectors

Ga naar het selectors.js-bestand in de Counter-container, het eerste geavanceerde concept dat we hier behandelen is de createSelector. Door eerst naar de code te kijken, haalt de const count variabele de count state op in de redux state tree met behulp van state.get (‘count’).

Vervolgens maken we een selector met behulp van de genoemde methode. Dit helpt ons bij het formatteren van de status / gegevens die we van de redux-statusboom ontvangen en door dit te doen, besparen we veel tijd bij het coderen van nieuwe functies die staatherstructurering afhandelen of het formatteren van de doelstatus elke keer dat we het nodig hebben om iets vooraan te plaatsen -einde. In dit voorbeeld heb ik de status die ik heb ontvangen niet gewijzigd. Ik ben net terug in de gewone staat voor demo-doeleinden.

Vervolgens wordt de resulterende functie gebruikt in de mapStateToProps, en met mapStateToProps is het volgende dat u moet configureren natuurlijk mapDispatchToProps.

acties maken

Wanneer reductiemaatregelen worden verzonden, moeten we altijd het type en de bijbehorende schakelgeval aangeven in een reductiemiddel dat het later zal invoeren om de applicatiestatus te wijzigen. Met het createActions-pakket van reduxsauce kunnen we twee vliegen in één klap slaan. We moeten het verloopstuk ook formatteren met reduxsaus om volledig te kunnen profiteren van dit pakket.

verloopstuk

Hierboven staat het verloopstuk van onze app. De initiële status wordt omsloten door de fromJS API en is onveranderlijk en aangezien de pakketnaam van toepassing is, beschermt deze de initiële status tegen mutatie. React is erg strikt met dit concept, dus houd dit altijd in gedachten. de createReducer API van reduxsauce heeft twee argumenten.

Ten eerste, de begintoestand. Ten tweede, het object dat toetsen heeft voor actietypes en waarden als een functie die het reductiemiddel zal activeren zodra een type overeenkomt met een verzendoproep. Samenvoegen wijzigt de redux-statusboom dienovereenkomstig. Er is geen echte app die niet weet hoe om te gaan met asynchrone API-oproepen, toch? Rechtsaf.

redux saga

Hier is het saga-gedeelte van ons programma. Alles is hetzelfde behalve de manier waarop we onze acties noemen. We maken gebruik van de type actie die we eerder hebben gemaakt en gebruiken ze in onze watcher-saga om asynchrone oproepen te verzenden die later onze redux-statusboom zullen beïnvloeden.

De vertraging is er om netwerklatentie te bespotten voor een veel beter asynchroon gevoel van de app. Oh, en tot slot, laten we ervoor zorgen dat we de prestaties niet vergeten.

code splitsen

Het splitsen van codes is een geweldige manier om de prestaties van webtoepassingen te verbeteren. JavaScript-code vergt het meeste van de gegevens van een gebruiker. Onthoud dat, dus bij codesplitsing, de eindgebruiker alleen het deel van de code kan downloaden dat hij nodig heeft voor gegevensverbruikefficiëntie.

Tot slot,

Er zijn veel pakketten en tools die ons helpen, software-ingenieurs om een ​​schonere en veel efficiëntere code te maken. komt met een kost, de kosten van het begrijpen van het onderliggende systeem en dat is denken in React.

Learning React vereist dat u uw coderingsparadigma naar een veel ander model verplaatst in vergelijking met de vorige denkwijze van codering in front-end. De tools en pakketten die ik in dit artikel heb besproken, bevatten die principes die nodig zijn om mooi en efficiënt in React te coderen en dat is wat een uitzonderlijke ontwikkelaar maakt.

Het zijn altijd de kleine dingen.

Ik hoop dat ik je daarmee heb geholpen je begrip van React verder te vergroten met dit kleine artikel. Proost!