React + Redux - beste praksis

Denne artikkelen fokuserer hovedsakelig på å implementere noen god praksis jeg følger når jeg bygger store applikasjoner med React og Redux.

Differensiere presentasjonskomponenter og containerkomponenter.

Når vi arkiverer en reaksjonsapplikasjon med reduks, bør vi dele komponentene våre i presentasjons- og containerkomponenter.

Presentasjonskomponenter er komponenter som gjengir HTML. Alle presentasjonskomponentene våre er statsløse komponenter, så er de skrevet som funksjonelle statsløse komponenter med mindre de trenger stativ og livssykluskroker. Presentasjonskomponenter vil ikke samhandle med reduksjonslager for staten. De mottar data via rekvisitter og gjengir dem.

Beholderkomponenter er for å hente data fra redukslager og gi dataene til presentasjonskomponentene. De har en tendens til å være statlige.

Presentasjonskomponent skal være statsløs funksjonell komponent som vist:

Beholderkomponent skal være tilstrekkelig funksjonell komponent inntil du ikke blir tvunget til å bruke React-komponenters livssyklusmetoder.

Poeng som skal bemerkes:

  • Vi kan se forbedret ytelse når du bruker statsløse funksjonelle komponenter. Disse komponentene unngår unødvendige kontroller og minnetildelinger og er derfor mer utførende.
  • Det vil være enkelt å teste en komponent, hvis du skriver komponenten så enkel som mulig ved å dele opp presentasjonskomponenter og containerkomponenter.
Bruk bindActionCreators for utsendelse av handlinger

Reduxs system for ekspedisjonshendelser er kjernen i dens statusstyringsfunksjonalitet. Imidlertid kan det være slitsomt å sende forsendelsesfunksjonen som en rekvisita til hver komponent som trenger å sende en handling.

Unngå dette.

Unngå dette.

I stedet gjør dette.

I ovennevnte kodefilterTalentPoolDataBySkills in bindActionCreators er tilgjengelig som this.props.filterTalentPoolDataBySkills for å sende ut handlingen. Det vil gjøre det lettere å vedlikeholde koden på lang sikt.

Forsøk å unngå å bruke setState og komponentens livssykluskroker når du bruker Redux:

Administrer applikasjonsstaten ved hjelp av redux-butikk når det er global tilstand. Forsøk å unngå å bruke setState i komponenten din når du bruker statlige administrasjonsbiblioteker som redux. Bruk komponenttilstand når det er fornuftig, dvs. En knappkomponent som viser en verktøytips når du holder musepekeren, vil ikke bruke Redux.

Unngå å gjøre dette.

I stedet gjør dette.

Her brukte vi redux-butikken for å få status og gjengi den i visningen direkte. Det er ikke nødvendig å bruke setState og komponentens livssykluskroker igjen. Redux er der for å gjøre den statlige lederjobben for deg.

Bruke .bind () på beste måte:

Det er to måter å binde den tilpassede komponentens omfang på.

  1. Binder dem i konstruktør.

På denne måten opprettes bare en ekstra funksjon på tidspunktet for komponentopprettelsen, og den funksjonen brukes selv når gjengivelsen utføres igjen.

2. Binding ved passering som propverdi.

.bind () -metoden oppretter en ny funksjon hver gang den kjøres, denne metoden vil føre til at det opprettes en ny funksjon hver gang renderingsfunksjonen kjøres. Dette har noen resultatkonsekvenser. I små applikasjoner kan vi ikke legge merke til dem, hvor vi som i store applikasjoner kan legge merke til dem. Så det er ikke å foretrekke å binde en funksjon ved passering som en prop-verdi.

Løsning:

  1. Det er bedre å binde dine tilpassede funksjoner i konstruktøren.
  2. Det er en Babel-plugin som heter Class Properties transform. Du kan skrive automatisk bundet funksjon ved å bruke fett-pil-syntaks.

Hvis vi ser koden ovenfor, er det ingen funksjoner å binde.

Bruk tilbehørsfunksjoner

For å bedre kodeinnsamling kan du flytte alle funksjonene dine som filtrerer, analyserer og annen datatransformasjonslogikk i en separat fil og importerer dem for å bruke disse funksjonene i din tilkoblingsmetode for react-redux som vist.

Ved å gjøre dette vil det være enkelt å legge til flyt-typer for funksjonene dine.

Skriv renere kode ved å bruke ES6 Funksjoner

Å skrive renere kode vil gjøre utviklerne livet enkelt å forstå og vedlikeholde koden. ES6-funksjoner vil gi oss mye renere måte å skrive kode på React.

Bruk attestering og spre attributter:

Unngå dette.

I stedet gjør dette.

Bruk pilfunksjoner:

Unngå dette:

I stedet gjør dette.

Bruk strømmetyper

En ting er sikkert at typekontroll forventes å være fremtiden for JS. Generelt har mange utviklere en forvirring mellom hva de skal implementere mellom flyt og typeskript og hvor jevnt de kan integreres i et nåværende prosjekt.

Typer er mer sofistikert å integrere i det nåværende prosjektet og flyt føles enkelt å introdusere, og innrømmer med en advarsel om at det kan inspisere mindre av kodingen din som forventet.

Når javascript-prosjektet vokser uten å skrive, vil den vanskeligere refactoring bli. Jo større prosjektet er, desto høyere er risikoen ved refactoring. Å bruke typekontroll eliminerer kanskje ikke risikoen helt, men det vil redusere den betraktelig.

Fordeler ved bruk av flyt:

  1. Ved påvisning av feil eller feil.
  2. Kommuniserer formålet med funksjonen.
  3. Det skalerer ned kompleks feilhåndtering.
  4. Tørker ut kjøretidsfeil.
Bruk axios-bibliotek for http-forespørsler via jQuery ajax:

Hent API og aksios er de mest foretrukne måtene å lage http-forespørsler på. Mellom disse to er det noen fordeler ved å bruke axios-bibliotek. De er

  • Det gjør det mulig å utføre transformasjoner på data før forespørsel er gjort eller etter at svaret er mottatt.
  • Det lar deg endre forespørselen eller svaret helt (også overskrifter). utfør også async-operasjoner før forespørsel fremsettes eller før Promise avgjør.
  • Innebygd XSRF-beskyttelse.
Bruk stilkomponenter for å style komponentene dine

Den grunnleggende ideen med stylede komponenter er å håndheve beste praksis ved å fjerne kartleggingen mellom stiler og komponenter. På denne måten kan du sortere komponentene dine med de tilsvarende stilene - noe som resulterer i lokaliserte klassenavn som ikke forurenser det globale css-navneområdet.

Hvis du bestemmer deg for å bruke stylede komponenter, ikke glem å installere plugin for å støtte syntaksutheving i strenger eller kanskje hjelpe til med å lage en ny.

Eksempel:

Test React-komponentene dine

Målet med enhetstesting er å skille ut hver del av programmet og teste at de enkelte delene fungerer riktig. Den isolerer det minste testbare programvaren fra resten av koden og avgjør om den oppfører seg akkurat som du forventer. Vi kan finne feil i tidlig fase.

I reaksjon på testkomponent bruker vi Jest og enzym. Jest ble opprettet av Facebook og er et testrammeverk for å teste javascript og React code. Sammen med Airbnb's Enzyme, som er et testverktøy, gjør det til den perfekte matchen å enkelt teste React-applikasjonen din.

Bruk ES Lint for bedre kodingskonvensjoner.

Godkjørte prosjekter har klare konsistente kodekonvensjoner, med automatisk håndhevelse. Foruten å sjekke stil, er linters også utmerkede verktøy for å finne visse klasser av feil, for eksempel de som er relatert til variabelt omfang. Tildeling til udeklarerte variabler og bruk av udefinerte variabler er eksempler på feil som kan påvises ved lo.

For React-spesifikke loftsregler, gjelder Eslint-plugin-react.

For loende strømningstyper gjelder regler for eslint-plugin-flowtype og eslint-plugin-flowtype-feil.