Advanced ReactJS: Best Practices for React + Redux + Sagas

kaffe til ettertanke

Første ting først, en rask introduksjon om hva som er React. Det er et JavaScript-bibliotek som brukes til å bygge brukergrensesnitt. Det har endret frontend-utviklingslandskapet helt siden det kom ut. Så hvis du ønsker å være en front-end nettutvikler er det nesten viktig å lære biblioteker som React eller Vue.js i dagens bransje. Her er en flott tutorial hvis du bare begynner å lære React. https://reactjs.org/tutorial/tutorial.html.

Jeg husker da jeg begynte å lære React. Jeg har alltid hatt en engstelig følelse av at jeg aldri kunne lære alt jeg trengte, det stadig skiftende JavaScript-språket som raste over hodet, og hvis jeg noen gang fikk noe riktig, ville jeg alltid ende med å spørre meg selv, var det virkelig den beste måten å gjøre det? Etter bokstavelig talt hundrevis av online tutorials, Youtube-søk og uferdige (og mest sannsynlig uvaskede) kopper kaffe, fikk jeg endelig et godt grep om hva React prøver å få inn i JavaScript-tabellen.

Imidlertid har jeg alltid kjempet for å finne en tutorial som samler alle de avanserte konseptene for React i en kompakt tutorial.

Jeg husker også at jeg hadde vanskelig for å forstå disse konseptene da de ble brukt i en stor kildekode. Det er gapet som denne artikkelen prøver å fylle. Avanserte verktøy og konsepter er innebygd i vår enkle app, dette er utelukkende for opplæringsformål, og du bør ikke bruke disse konseptene hvis appen din ikke trenger dem.

Nok med chit-chatten. La oss snakke koden. Last ned den ferdige koden fra denne repoen og følg README slik at du kan se og føle hva vi skal bygge her. https://github.com/jelorivera08/react-starter-pack.

Landingsside for appen

Over kan du se telletilstanden som vises og fire knapper som utløser deres respektive handlinger. Handlingene deres er selvforklarende.

velgere

Gå videre til filen selectors.js i Counter-containeren. Det første avanserte konseptet vi takler her er createSelector. Ved å se på koden henter først const count-variabelen telletilstanden inne i reduksjonsstatstreet ved å bruke state.get (‘count’).

Deretter oppretter vi en velger ved hjelp av nevnte metode. Dette hjelper oss med å formatere tilstanden / dataene vi mottar fra reduksjonsstatreet, og ved å gjøre dette sparer vi mye tid på å kode nye funksjoner som håndterer omstillingen av staten eller formaterer måltilstanden hver gang vi trenger den for å gjengi noe foran. -slutt. I dette eksemplet endret jeg ikke tilstanden jeg mottok. Jeg har nettopp returnert ren tilstand for demo-formål.

Deretter vil den resulterende funksjonen bli brukt inne i mapStateToProps, og med mapStateToProps er naturlig nok den neste tingen å konfigurere mapDispatchToProps.

opprette handlinger

Hver gang utsendelse av reduksjonshandlinger, må vi alltid oppgi type og den tilhørende koblingssaken til en redusering som den vil komme inn senere for å endre applikasjonsstatus. Med createActions-pakken fra reduxsauce kan vi treffe to fugler med en stein. Vi bør også formatere reduksjonsenheten med reduksaus for å kunne dra full nytte av denne pakken.

redusering

Over er reduksjonsenheten vår for appen. Den opprinnelige tilstanden er omsluttet av fromJS API fra uforanderlig, og ettersom pakkenavnet gjelder, beskytter den starttilstanden mot å bli mutert. Reaksjon er veldig streng med dette konseptet, så husk alltid på dette. createReducer API fra reduxsauce har to argumenter.

For det første den opprinnelige tilstanden. For det andre, objektet som har nøkler for handlingstyper og verdier som en funksjon som reduseringsapparatet avfyrer når en type samsvarer med et utsendelsesanrop. Slå sammen, endrer reduksjonsstatestreet deretter. Det er ingen apper i det virkelige liv som ikke vet hvordan man håndterer asynkrone API-anrop, ikke sant? Ikke sant.

reduks saga

Her er sagadelen av programmet vårt. Alt er det samme bortsett fra måten vi kaller våre handlinger på. Vi benytter oss av typen handling som vi opprettet tidligere, og bruker dem i vår vaktersaga for å sende asynkrone samtaler det som senere vil påvirke redux-tilstandstreet vårt.

Forsinkelsen er der for å spotte nettverksforsinkelse for en mye bedre asynk følelse av appen. Oh, og til slutt, la oss sørge for at vi ikke glemmer ytelsen.

kodesplitting

Kodedeling er en flott måte å forbedre ytelsen til webapplikasjoner. JavaScript-koden tar mest ut av brukerens data. Husk at det, så ved kodedeling, lar sluttbrukeren laste ned bare den delen av koden den trenger for effektivitet i dataforbruket.

For å konkludere,

Det er mange pakker og verktøy der ute som hjelper oss, programvareingeniører å lage en renere og en mye mer effektiv kode. kommer med en kostnad, kostnadene for å forstå det underliggende systemet og det som tenker i React.

Læringsreaksjon krever at du skifter kodingsparadigmet til et mye mer annerledes sammenlignet med det forrige tankesettet for koding i front-end. Verktøyene og pakkene jeg har diskutert i denne artikkelen, inneholder de prinsippene som trengs for å kode vakkert og effektivt i React, og det er det som gjør en eksepsjonell utvikler.

Det er alltid de små tingene.

Med det håper jeg at jeg har hjulpet deg med å styrke forståelsen av React med denne lille artikkelen. Jubel!