Avanceret ReactJS: Bedste fremgangsmåder til React + Redux + sagaer

kaffe til tanke

Første ting først, en hurtig introduktion til, hvad der er React. Det er et JavaScript-bibliotek, der bruges til at oprette brugergrænseflader. Det har ændret front-end udviklingslandskabet lige siden det kom ud. Så hvis du stræber efter at være en front-end webudvikler, er det næsten vigtigt at lære biblioteker som React eller Vue.js i dagens industri. Her er en god tutorial, hvis du lige er begyndt at lære React. https://reactjs.org/tutorial/tutorial.html.

Jeg kan huske, da jeg begyndte at lære React. Jeg havde altid den ængstelige følelse af, at jeg aldrig kunne lære alt, hvad jeg havde brug for, det konstant skiftende JavaScript-sprog, der truede over mit hoved, og hvis jeg nogensinde fik noget rigtigt, ville jeg altid ende med at spørge mig selv, var det virkelig den bedste måde at gøre det? Efter bogstaveligt talt hundreder af online-tutorials, Youtube-søgninger og ufærdige (og sandsynligvis uvaskede) kopper kaffe, fik jeg endelig et godt greb om, hvad React forsøger at bringe ind i JavaScript-tabellen.

Jeg har dog altid kæmpet for at finde en tutorial, der samler alle avancerede koncepter i React i en kompakt tutorial.

Jeg kan også huske, at jeg havde svært ved at forstå disse begreber, da de blev brugt i en stor kildekode. Det er det hul, som denne artikel forsøger at udfylde. Avancerede værktøjer og koncepter er integreret i vores enkle app, dette er udelukkende til tutorials-formål, og du bør ikke bruge disse koncepter, hvis din app ikke har brug for dem.

Nok med chit-chatten. Lad os snakke kode. Download den færdige kode fra denne repo, og følg README, så du kan se og føle, hvad vi vil bygge her. https://github.com/jelorivera08/react-starter-pack.

Appens landingsside

Ovenfor kan du se den viste tællestatus og fire knapper, der udløser deres respektive handlinger. Deres handlinger er selvforklarende.

selektorer

Gå videre til filen selectors.js i Counter-containeren, det første avancerede koncept, vi tackle her, er createSelector. Ved at se på koden henter først konst-tællervariablen tælletilstanden inde i redux-tilstandstræet ved hjælp af state.get (‘count’).

Derefter opretter vi en vælger ved hjælp af den nævnte metode. Dette hjælper os med at formatere den tilstand / data, vi modtager fra redux-tilstandstræet, og ved at gøre dette sparer vi en masse tid på at kode nye funktioner, der håndterer tilstandsomstrukturering eller formatering af måltilstanden, hver gang vi har brug for det til at gøre noget foran -ende. I dette eksempel ændrede jeg ikke den tilstand, jeg modtog. Jeg vendte lige tilbage til almindelig tilstand til demo-formål.

Derefter bliver den resulterende funktion brugt inde i mapStateToProps, og med mapStateToProps er naturligvis den næste ting at konfigurere mapDispatchToProps.

oprette handlinger

Hver gang vi sender reduktionshandlinger, skal vi altid erklære dens type og den tilsvarende switch case til en reducer, som den vil indtaste senere for at ændre applikationstilstanden. Med createActions-pakken fra reduxsauce kan vi ramme to fugle med en sten. Vi bør også formatere reduktionsreduceringen med reduxsauce for fuldt ud at drage fordel af denne pakke.

reducering

Ovenfor er vores app reducer. Den oprindelige tilstand er lukket af fromJS API fra uforanderlig, og da pakkenavnet gælder, beskytter den den oprindelige tilstand mod at blive muteret. Reaktion er meget streng med dette koncept, så hold dette altid i tankerne. createReducer API fra reduxsauce har to argumenter.

Først den oprindelige tilstand. For det andet er det objekt, der har nøgler til handlingstyper og værdier som en funktion, som reduceringsenheden affyrer, når en type matcher et forsendelsesopkald. Flet ændrer derefter reduksetilstandstræet i overensstemmelse hermed. Der er ingen app i det virkelige liv, der ikke ved, hvordan man håndterer asynkron API-opkald, ikke? Ret.

redux saga

Her er saga-delen af ​​vores program. Alt er det samme bortset fra den måde, vi kalder vores handlinger på. Vi bruger den type handling, som vi oprettede tidligere, og bruger dem i vores vagt-saga for at sende asynkrone opkald det, som senere vil påvirke vores redux-tilstandstræ.

Forsinkelsen er der for at bespotte netværkets latenstid for en meget bedre async-fornemmelse af appen. Åh, og endelig, lad os sørge for, at vi ikke glemmer ydeevnen.

kodespaltning

Kodespaltning er en fantastisk måde at forbedre webapplikationsydelsen. JavaScript-kode tager mest pris for en brugers data. Husk, at det med kodespaltning gør det muligt for slutbrugeren kun at downloade den del af koden, den har brug for, til effektivitet i dataforbruget.

Afslutningsvis,

Der er mange pakker og værktøjer derude, der hjælper os, softwareingeniører med at skabe en renere og en meget mere effektiv kode. kommer med en omkostning, omkostningerne ved at forstå det underliggende system, og det tænker i React.

Læringsreaktion kræver, at du flytter dit kodningsparadigme til en meget mere anderledes sammenligning med det foregående tankesæt med kodning i front-end. De værktøjer og pakker, jeg har diskuteret i denne artikel, indkapsler de nødvendige principper for at kode smukt og effektivt i React, og det er det, der gør en enestående udvikler.

Det er altid de små ting.

Med det håber jeg, at jeg har hjulpet dig med at forbedre din forståelse af React med denne lille artikel. Skål!