Reagálási minta: Centralizált PropTypes

Kerülje el az ismétlést a PropTypes központosításával

A React-ben három népszerű mód van a típusok kezelésére: PropTypes, TypeScript és Flow. Ez a bejegyzés a PropTypes-ről szól, amelyek jelenleg a legnépszerűbbek.

? A React típusú típusok érvényesítéséhez általában a ... # reagálást használom

Az RT értékelte

- Cory House (@housecor), 2017. szeptember 23

Mivel a PropTypes futás közben ad típusú figyelmeztetéseket, hasznos, ha a lehető legpontosabbak.

  • Az alkatrész elfogad egy objektumot? Deklarálja az objektum alakját.
  • A Prop csak egy meghatározott értéklistát fogad el? Használja a oneOf-ot.
  • A tömbnek számokat kell tartalmaznia? Használja az arrayOf.
  • Még a saját típusait is deklarálhatja. Az AirBnB számos további PropType-t kínál.

Íme egy PropType példa:

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

Nagy objektumokkal rendelkező valódi alkalmazásokban ez gyorsan sok kódhoz vezet. Ez probléma, mert a React-ben gyakran ugyanazt az objektumot adja át több összetevőnek . Ha ezeket a részleteket több összetevő fájlban megismétli, akkor megszűnik a DRY elv (ne ismételje meg magát). Ha ismétli önmagát, karbantartási problémát okoz.

A megoldás? Központosítsa a PropTípusokat .

Itt található a PropTypes központosítása

Jobban szeretem a PropTypes központosítását az /types/index.js fájlban.

A 2. sorban a megnevezett importot használom a deklarációk rövidítéséhez. ?

És így használom a fent deklarált PropType-t:

// 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 }); });

Megnevezett importot használok, hogy hivatkozást kapjak az exportált PropType deklarációra a 2. sorban. És a 13. sorra tettem.

Előnyök :

  1. A központosított PropType gyökeresen leegyszerűsíti az összetevő PropType deklarációját. A 13. sor csak a központosított PropType-re hivatkozik, így könnyen olvasható.
  2. A központosított típus csak az alakot deklarálja, így szükség szerint továbbra is szükség szerint megjelölheti a támaszt.
  3. Nincs több másolás / beillesztés. Ha az objektum alakja később változik, egyetlen helye van a frissítésre. ?

Itt van egy működő példa a CodeSandbox-ra.

Extra jóváírás: Készítse el PropType-ját

Végül fontolja meg néhány egyéni kód megírását a PropType-deklarációk kiszolgálóoldali kódból történő előállításához. Például, ha az API-t erősen beírt nyelvvel írják, például C # vagy Java, fontolja meg a PropType-deklarációk előállítását a szerveroldali API-készítési folyamat részeként a kiszolgálóoldali osztályok alakjának kiolvasásával. Így nem kell aggódnia az ügyféloldali PropTypes és a szerveroldali API-kód szinkronban tartása miatt. ?

Mellékjegyzet : Ha ismer egy olyan projektet, amely ezt bármilyen szerveroldali nyelvre elvégzi, kérjük, válaszoljon a megjegyzésekben, és ide teszek egy linket.

Szerkesztés : A JSON-t átalakíthatja PropTypes-vé a transform.now.sh használatával. ?

Összegzés

  1. Nyújtsa be a PropType-okat a lehető leghatározottabban, hogy tudja, mikor hibázott.
  2. Központosítsa a PropTípusokat, hogy ne ismételje meg önmagát.
  3. Ha erősen beírt nyelven dolgozik a szerveren, fontolja meg a PropTypes előállítását a kiszolgálóoldali kód olvasásával. Ez biztosítja, hogy a PropTypes megfeleljen a szerveroldali típusoknak.

További információt keres a React-ről? ⚛️

Több React és JavaScript tanfolyamot írtam a Pluralsight-on (ingyenes próbaverzió).

Cory House több, a JavaScript, a React, a tiszta kód, a .NET és a Pluralsight témájú kurzusok szerzője. A reakjsconsulting.com fő tanácsadója, a VinSolutions szoftver-építésze, a Microsoft MVP-je, és nemzetközi szinten képzi a szoftverfejlesztőket olyan szoftveres gyakorlatokra, mint a front-end fejlesztés és a tiszta kódolás. Cory a Twitteren @housecor néven tweetel a JavaScript-ről és a front-end fejlesztésről.