Uzorak reakcije: Centralizirani tipovi vlasništva

Programiranje

Izbjegavajte ponavljanje centraliziranjem PropTypes

Tri su popularna načina za rukovanje vrstama u Reactu: PropTypes, TypeScript i Flow. Ovaj je post o PropTypes, koji su trenutno najpopularniji.

? Za provođenje tipova u Reactu obično koristim ... # reagiranje

RT je cijenjen

- Cory House (@housecor) 23. rujna 2017

Budući da PropTypes pružaju upozorenja o tipu tijekom izvođenja, korisno je biti što precizniji.

  • Komponenta prihvaća objekt? Izjavite oblik predmeta.
  • Prop prihvaća samo određeni popis vrijednosti? Koristite oneOf.
  • Niz bi trebao sadržavati brojeve? Koristite arrayOf.
  • Možete čak prijaviti i svoje vrste. AirBnB nudi mnoge dodatne PropType-ove.

Evo primjera PropType:

UserDetails.propTypes = { user: PropTypes.shape({ id: PropTypes.number.isRequired, firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired, role: PropTypes.oneOf(['user','admin']) };

U stvarnim aplikacijama s velikim objektima to brzo dovodi do puno koda. To je problem, jer u Reactu često prenosite isti objekt na više komponenti . Ponavljanje ovih detalja u višekomponentnim datotekama krši načelo SUHO (nemojte se ponavljati). Ponavljanje sebe stvara problem održavanja.

Rješenje? Centralizirajte svoje PropTypes .

Evo Kako centralizirati PropTypes

Više volim centraliziranje PropTypeova u /types/index.js.

Koristim imenovani uvoz u retku 2 za skraćivanje deklaracija. ?

I evo kako koristim PropType koji sam gore izjavio:

// types/index.js import { shape, number, string, oneOf } from 'prop-types'; export const userType = shape({ id: number, firstName: string.isRequired, lastName: string.isRequired, company: string, role: oneOf(['user', 'author']), address: shape({ id: number.isRequired, street: string.isRequired, street2: string, city: string.isRequired, state: string.isRequired, postal: number.isRequired }); });

Koristim imenovani uvoz da bih dobio referencu na izvezenu PropType deklaraciju u retku 2. I stavio sam je u upotrebu na liniji 13.

Prednosti :

  1. Centralizirani PropType radikalno pojednostavljuje PropType deklaraciju komponente. Redak 13 samo upućuje na centralizirani PropType, tako da je jednostavan za čitanje.
  2. Centralizirani tip samo deklarira oblik, tako da i dalje možete prema potrebi označiti rekvizit.
  3. Nema više kopiranja / lijepljenja. Ako se oblik predmeta promijeni kasnije, imate jedno mjesto za ažuriranje. ?

Evo radnog primjera na CodeSandboxu.

Dodatni kredit: generirajte svoje vrste PropType

Na kraju, razmislite o pisanju nekog prilagođenog koda za generiranje vaših PropType deklaracija iz koda na strani poslužitelja. Na primjer, ako je vaš API napisan koristeći jako otkucani jezik kao što je C # ili Java, razmislite o generiranju svojih PropType deklaracija kao dijelu procesa izrade API-ja na strani poslužitelja čitanjem oblika klasa na strani poslužitelja. Na ovaj način ne morate brinuti hoćete li sinkronizirati PropTypes na strani klijenta i API kod na poslužitelju. ?

Napomena : Ako znate za projekt koji to radi za bilo koji jezik na strani poslužitelja, odgovorite u komentarima i ovdje ću dodati vezu.

Uredi : JSON možete pretvoriti u PropTypes pomoću transform.now.sh. ?

Sažetak

  1. Navedite svoje PropTypes što je eksplicitnije moguće kako biste znali kada ste pogriješili.
  2. Centralizirajte svoje PropTypeove kako biste se izbjegli ponavljati.
  3. Ako na poslužitelju radite na strogo otkucanom jeziku, razmislite o generiranju svojih PropTypeova čitanjem koda na strani poslužitelja. To osigurava da se vaši PropTypeovi podudaraju s vrstama na strani poslužitelja.

Tražite li više o Reactu? ⚛️

Napisao sam više tečajeva React-a i JavaScript-a na Pluralsight-u (besplatna proba).

Cory House autor je više tečajeva o JavaScript-u, React-u, čistom kodu, .NET-u i još mnogo toga o Pluralsightu. Glavni je savjetnik u tvrtki reakjsconsulting.com, softverski arhitekt u tvrtki VinSolutions, Microsoftovom MVP-u, te međunarodno osposobljava programere softverskih praksi poput front-end razvoja i čistog kodiranja. Cory tweeta o JavaScript-u i front-end razvoju na Twitteru kao @housecor.