Kuidas kasutada trükikirja React ja Reduxi abil

Juhend React ja Redux rakenduste arendamiseks koos Typescriptiga

Laadige oma React'i rakenduste stabiilsus üle Typescriptiga

Typescript on kõigi aegade tugevaimas positsioonis, et muuta teie Reaxi rakendused stabiilsemaks, loetavamaks ja paremini hallatavaks. Pakett on järjekindlalt pakkunud rohkem tuge Reacti ja Javascripti kasutajaliidese raamistikele; alates versioonidest 3.0 ja 3.1 on funktsioonid spetsiaalselt nende jaoks tõusnud. Integreerimine Reactiga oli varem peavalu tekitav ülesanne, kuid nüüd on see otseprotsess, millest räägime selles artiklis.

Loo React App on paketti sisse ehitatud ka Typescripti tugi, kuna react-scripts 2.1. Selle saab hõlpsalt lisada uude projekti lipukesega - tekstikiri. Enne kui uurime, kuidas integreerida tüüpe ja liideseid Reaxi rekvisiitidesse ja olekusse, millele järgneb Reduxi häälestamine, kasutame CRA-d reaktoripõhise rakenduse alglaadimiseks.

Typescripti, selle kasutamise ja võimaluste kohta lisateabe saamiseks lugege minu artiklit Typescript with NodeJS, mille eesmärk on paketi tutvustamine ja NodeJS-i integreerimise sammud:

Rakenduse Create React rakenduse installimine tüpikirjaga

Veebisaidil Create React App on spetsiaalne leht, mis on mõeldud spetsiaalselt installiprotsesside dokumenteerimiseks, ning migreerimisetapid olemasolevate rakenduste Typescripti toe lisamiseks. Uue rakenduse loomiseks koos Typescriptiga toimige järgmiselt.

lõng loo react-app app_name --typescript
#või
npx loo-reageeri-rakenduse_nimi - tüüpi tekst

Javascriptipõhises CRA katteplaadis on paar märgatavat muudatust:

  • Nüüd on lisatud fail tsconfig.json, mis konfigureerib Typescripti kompilaatori suvandid.
  • .js-failid on nüüd .tsx-failid. Typescripti kompilaator korjab kompileerimise ajal kõik .tsx-failid.
  • package.json sisaldab @types pakettide sõltuvusi, sealhulgas tugisõlme, jesti, reageerimise ja reageerimise domeeni.
  • Fail react-app-env.d.ts viitab reaktiskriptide tüüpidele. See fail luuakse automaatselt arendusserveri käivitamisel lõnga alustades.

Selles etapis käivituv lõng kompileerib ja käivitab teie rakenduse, andes teie brauseris identse alglaadimisega rakenduse, mille algne vaste on ainult Javascriptil.

Enne jätkamist tasub peatada arendusserver ja vaadata üle mõned rihveldamisriistad, mis on mõeldud spetsiaalselt Typescripti ja Reacti arendamiseks. Keskendun sublime Text 3-le - see on minu valitud IDE -, kuid värvimise üldmõisted kehtivad kõigile IDE-dele. Tutvume lühidalt tööriistadega.

TSLint-Reacti installimine

Värvimistööriistade installimine on Typescripti ja Reaketi jaoks eriti kasulik; leiate, et viitate tööriistavihjetele teatud tüüpi saamiseks, eriti sündmuste puhul. Riietusriistad on vaikimisi seadistusega eriti ranged, seega jätame mõned neist reeglitest paigaldusprotseduuris välja.

Märkus. Need tööriistad on installitud NPM-i või lõnga kaudu ega ole seotud kindla IDE-ga. Esiteks installime need tööriistad enne konkreetseid pakette Sublime Text 3 jaoks.

Installige trükikiri, tslint ja tslint-react paketid globaalselt:

lõng globaalne lisada tslint masinakirjas tslint-react

Alustage tslint projektiprojekti kataloogis:

tslint --init

See käsk loob faili tslint.json koos mõne vaikesuvandiga. Asendage see fail järgmisega:

{
    "defaultSeverity": "viga",
    "laieneb": [
        "tslint-reageerima"
    ],
    "jsRules": {
    },
    "reeglid": {
        "liikme juurdepääs": vale,
        "tellitud import": vale,
        "quotemark": vale,
        "no-console": vale,
        semikoolon: vale,
        "jsx-no-lambda": vale
    },
    "rulesDirectory": [
    ],
    "linterOptions": {
        "välistama": [
            "config / ** / *. js",
            "node_modules / ** / *. ts"
       ]
   }
}

Selles failis toimuva kokkuvõtteks:

  • defaultSeverity on tase, kus vigu töödeldakse. viga, mis on vaikimisi väärtus, toob teie IDE-s punaseid vigu, hoiatuse korral kuvatakse oranžid hoiatused.
  • "laieneb": ["tslint-reageerige"]: Reeglid, millest me laiendame, on reaalajas põhinevad - oleme eemaldanud tslinti soovitatud teegi, mille mõned reeglid ei järgi Reakti süntaksi.
  • "reeglid": {"reegli nimi": vale, ...}: reeglite plokist võime reeglid välja jätta. Näiteks peatab liikmetele juurdepääsu reegli tslint teatamise, et meil puuduvad juurdepääsufunktsioonid meie funktsioonidest (avalik, privaatne) - süntaks, mida Reaktis tavaliselt ei kasutata. Veel üks näide, tellitud import, soovitab meil impordiavaldused tähestikulises järjekorras tellida. Tutvuge kõigi siin saadaolevate reeglitega.
  • "linterOptions": {"välista": [...]}: siin välistame TSLinti kontrollimisest kõik konfiguratsioonikataloogi Javascripti failid ja sõlme_moduulide Typescripti failid.

Ülev tekst 3 paketti

Arenduskeskkonna seadistamise viimase sammuna installige pakettControl kaudu SublimeLinter ja seejärel SublimeLinter-tslint paketid. Sublime Text taaskäivitamisel on tööriistad hõlpsasti saadaval.

Märkus. Võite saada tõrke, öeldes, et sublime teksti taaskäivitamisel ei leitud tslinti moodulit. Kui see oli nii, installige paketid uuesti lokaalselt, mitte globaalselt, milleks me varem otsustasime (ja mida dokumendid näitavad):

lõng lisada tslint tslint-reageerida

VS-koodi laiendus

Visual Studio Code'i redigeerija jaoks installige TSLinti laiendus, et saada täielik Typescripti tugi.

Kui teie IDE on nüüd valmis trükikirja arendamisega tegelema, siis mõelgem mõnele koodile, uurides, kuidas lisada liideseid ja tüüpe rekvisiitidele ja olekut Reaktis.

Rekvisiitide ja oleku liidesed ja tüübid

Saame rekvisiitide ja komponentide oleku jaoks liideseid ja tüüpe rakendada.

Liideste määratlemine

Komponentide jaoks liidese rakendamine sunnib rekvisiite komponentidesse ülekandmisel sellistest andmestruktuuridest kinni pidama, tagades, et neid kõiki arvestatakse, peatades samal ajal ka soovimatute rekvisiitide edastamise.

Liideseid saab määratleda väljaspool komponenti või importida eraldi failist. Defineerige liides nii:

liides FormProps {
    eesnimi: string;
    perenimi: string;
    vanus: arv;
    agreetoterms ?: loogiline;
}

Olen siin loonud vähestest väärtustest koosneva liidese FormProps. agreetoterms on valikuline, seega? nime järel. Samuti saame olekut kasutada liidesega:

liides FormState {
    esitatud ?: loogiline;
    täisnimi: string;
    vanus: arv;
}

Märkus. Tslint kutsus meid üles kasutama suurtähte i kõigi meie liidese nimede ees, nt. IFormProps ja IFormState oleksid ülaltoodud nimed. Seda ei täideta enam vaikimisi.

Liideste rakendamine komponentidele

Saame liideseid rakendada nii klassi kui ka kodakondsuseta funktsioonide komponentide jaoks. Klassikomponentide puhul kasutame rekvisiitide ja olekuliideste rakendamiseks nurksulgude süntaksit:

ekspordiklass MyForm laiendab React.Component  {
   ...
}

Märkus. Kui teil pole rekvisiite, kuid soovite määratleda oleku, võite vormiProps asemel asetada kas {} või objekti. Mõlemad väärtused on kehtivad tühjad objektid.

Ja koos funktsioonikomponentidega saame edastada rekvisiidi liidese, millele järgnevad muud argumendid ja nende konkreetsed liidesed:

funktsioon MyForm (rekvisiidid: FormProps) {
  ...
}

Liideste importimine

Liidese definitsioonide rühmade määratlemine ühes failis on hea tava; üldine tava on luua liideste rühmadega src / tüübid / kaust:

// src / tips / index.tsx
ekspordiliides FormProps {
    eesnimi: string;
    perenimi: string;
    vanus: arv;
    agreetoterms ?: loogiline;
}

Ja vajalike liideste importimiseks komponendifailidesse:

// src / components / MyForm.tsx
importida reageerida 'reageerima';
importige {StoreState} kataloogist '../types/index';
...

Töötamine enumidega

Enumid on veel üks Typescripti kasulik funktsioon. Ütleme, et tahtsin määratleda MyFormi komponendi enumi ja seejärel kontrollida, kas esitatud vormi väärtus on kehtiv:

// defineeri enum
enum HeardFrom {
    SEARCH_ENGINE = "Otsingumootor",
    FRIEND = "sõber",
    OTHER = "muu"
}
// massiivi kuulmine
lase kuulda From = [HeardFrom.SEARCH_ENGINE,
                 HeardFrom.FRIEND,
                 HeardFrom.OTHER];
// saada esitatud vormi väärtus
const submitted_heardFrom = form.values.heardFrom;
// kontrollige, kas väärtus on õige
kuulnudFrom.sisaldab (esitatud_kuulatav)
   ? kehtiv = tõene
   : kehtiv = vale;

Töötamine iterabletega

Me võime ka iterableid läbi lüüa, kasutades tüüpide Scripti meetodites… ja… jaoks. Neil kahel meetodil on üks oluline erinevus:

  • Kui kasutate väärtust…, kuvatakse itereeritavate väärtuste loend.
  • Kui kasutate sisestuspunkti ... jaoks, kuvatakse itereeritavate võtmete loend.
jaoks (las ma kuulsinFromist) {
   console.log (i); // "0", "1", "2",
}
jaoks (las ma kuulsinFrom) {
   console.log (i); // "Otsingumootor", "Sõber", "Muu"
}

Trükiüritused

Kui soovite sündmust (näiteks pun-i pole ette nähtud) tippida, näiteks onChange'i või onClicki sündmusi, kasutage süntaksi tööriistu, et saada täpne sündmus.

Vaatleme järgmist näidet, kus värskendame oma olekut iga kord, kui nimesisestust muudetakse. Hiirt hõljutades kursori muutmise () kohal näeme selgelt, et sündmuse tüüp on tõepoolest React.ChangeEvent :

Hõljutades käepidetChange () kursori kohal sündmuse tüübi saamiseks

Seda tüüpi kasutatakse siis funktsiooni HandChange definitsiooni e-argumendi tippimisel.

Olen kirjutanud e nime ja väärtuse objektid ka järgmise süntaksiga:

const {nimi, väärtus}: {nimi: string; väärtus: string;} = e.target;

Kui te ei tea, milliseid tüüpe objekt täpsustab, võite lihtsalt kasutada mis tahes tüüpi. Oleksime võinud seda siin teha:

const {nimi, väärtus}: any = e.target;

Nüüd oleme mõned põhitõed läbi vaadanud, külastame järgmisel korral, kuidas Reduxit Typescriptiga üles seada, ja vaatame selle kaudu üle veel mitu Typescripti spetsiifilisi funktsioone.

Redux koos trükikirjaga

Kui soovite tutvuda sellega, kuidas Redux töötab Reaketiga, lugege minu sissejuhatavat artiklit:

1. samm: poe sisestamine

Esiteks tahame määratleda liidese meie Reduxi kauplusele. Oodatud olekustruktuuri määratlemine on teie meeskonnale kasulik ja aitab eeldatava rakenduse oleku säilitamisel.

Seda saab teha failis /src/types/index.tsx, mida arutasime varem. Siin on näide lokaalsuse ja autentimise kohta:

// src / tips / index.tsx
eksportliides MyStore {
    keel: keel;
    riik: nöör;
    autentimine: {
        autentitud: tõeväärtus;
        kasutajanimi ?: string;
    };
}

2. samm: toimingutüüpide ja toimingute määratlemine

Toimingutüüpe saab määratleda const & type mustri abil. Esiteks tahame määratleda toimingutüübid failis src / constants / index.tsx:

// src / konstandid / index.tsx
eksport const SET_LANGUAGE = 'INCREMENT_ENTHUSIASM';
eksporditüüp SET_LANGUAGE = tüübi SET_LANGUAGE eksportimine;
ekspordi const SET_COUNTRY = 'SET_COUNTRY';
eksporditüüp SET_COUNTRY = tüübi SET_COUNTRY eksportimine;
export const AUTHENTICATE = 'AUTHENTICATE';
ekspordi tüüp AUTHENTICATE = typeof AUTHENTICATE;

Pange tähele, kuidas meie äsja määratletud konstante kasutatakse liidese tüübina ja stringikeeskirjana, mida kasutame järgmisena.

Neid const & tüüpi objekte saab nüüd importida teie faili src / action / index.tsx, kus saame määratleda toiminguliidesed ja toimingud ise ning neid kogu aeg kirjutada:

// src / action / index.tsx
import * konstanditena '../konstantidest';
// määratlege toiminguliidesed
ekspordi liides SetLanguage {
    tüüp: konstandid.SET_LANGUAGE;
    keel: keel;
}
eksportliides SetCountry {
    tüüp: konstandid.SET_COUNTRY;
    riik: nöör;
}
ekspordiliidese autentimine {
    tüüp: konstandid.AUTHENTIKAAT;
    kasutajanimi: string;
    pw: nöör;
}
// määratlege toimingud
ekspordifunktsioon setLanguage (l: string): SetLanguage ({
   tüüp: konstandid.SET_LANGUAGE,
   keel: l
});
ekspordifunktsioon setCountry (c: string): SetCountry ({
   tüüp: konstandid.SET_COUNTRY,
   riik: c
});
ekspordifunktsiooni autentimine (u: string, pw: string): autentimine ({
   tüüp: konstandid.AUTHENTIKAAT,
   kasutajanimi: u,
   pw: pw
});

Vaadake autentimistoimingut eriti siin - edastame funktsiooni kasutajanime ja parooli, mis mõlemad on tüüpi stringi. Tippitakse ka tagasiväärtus, antud juhul autentimine.

Autentimise liidesesse lisame ka toimingu eeldatava kasutajanime ja pw väärtused, et toiming oleks kehtiv.

3. samm: reduktorite määratlemine

Toimingu tüübi määramise lihtsustamiseks reduktoris saame ära kasutada ühenduse tüüpe, mis on sisse viidud Typescript 1.4-s. Liitmetüüp annab meile võimaluse ühendada veel 2 tüüpi ühte tüüpi.

Lisage oma toimikute faili meie liideste all paiknemise ühenduse tüüp:

// src / action / index.tsx
eksporditüüp Locality = SetLanguage | SetCountry;

Nüüd saame seda paikkonnatüüpi rakendada meie paikkonna vähendamise meetme jaoks, paksus kirjas allpool:

// src / reduktorid / index.tsx
import {Locality} kataloogist '../actions';
importige {StoreState} kataloogist '../types/index';
importi {SET_LANGUAGE, SET_COUNTRY, AUTHENTICATE} kaustast '../constants/index';
ekspordifunktsiooni paikkond (olek: StoreState, toiming: Locality): StoreState {
  
  lüliti (action.type) {
    juhtum SET_LANGUAGE:
      return return {... riik, keel: action.language};
    juhtum SET_COUNTRY:
      tagasi {... riik, keel: action.country};
    juhtum AUTHENTICATE:
      tagastama {
         ... osariik,
         autentimine: {
            kasutajanimi: action.username,
            autentitud: tõsi
          }
      };
   }
  tagasitulek;
}

See reduktor on suhteliselt sirge, kuid sellegipoolest täielikult kirjutatud:

  • See reduktor, mida nimetatakse paikkonnaks, tipib meie osariiki StoreState ja eeldatav toiming paikkonnatüübiks.
  • Redutseerija tagastab StoreState'i objekti, kui ainult algse oleku korral toimingud ei sobi.
  • Meie pidevaid ja tüüp-paare kasutatakse ka siin toimingute vahetamiseks.

4. samm: esialgse poe loomine

Nüüd saame teie index.tsx-is käivitada poe, kasutades uuesti nurk sulgudes tüübi edastamiseks koos createStore () -ga:

// src / index.tsx
import {looStore} kaustast 'redux';
import {paikkond} kataloogist ./reducers/index;
importige {StoreState} kataloogist './types/index';
const store = createStore  (paikkond, {
   keel: 'briti (inglise)',
   riik: „Ühendkuningriik”,
   autentimine: {
       autentitud: vale
   }
});

Oleme peaaegu valmis - see hõlmab enamiku meie Reduxi integratsioonist. Külastageme konteineri komponentide eest ka kaarte mapStateToProps ja mapDispatchToProps.

Riigi ja lähetamise kaardistamine

Ärge unustage mapStateToPropsis oleku argumenti kaardistada StoreState'iga. Teise argumendi, omaProps, saab sisestada ka rekvisiidi liidese abil:

// mapStateToProps näide
importige {StoreState} kataloogist '../types/index';
liides LocalityProps = {
    riik: nöör;
    keel: keel;
}
funktsioon mapStateToProps (olek: StoreState, ownProps: LocalityProps) ({
     keel: osariik.keel,
     riik: osariik,
});

mapDispatchToProps on pisut erinev; kasutame jälle liidese edastamiseks Dispetšeri meetodisse nurksulgu. Seejärel saadab ootuspäraselt tagastamisplokk meie asukoha tüüpi toimingud:

// mapDispatchToProps näide
const mapDispatchToProps = {
   action.setLanguage,
   action.setCountry
}

Märkus. Kuna me mässime need toimingud ühendusse (), ei pea me oma toiminguid pakkima lähtepunkti (). Samuti võime siin väljastada oma tegevuse parameetreid.

Lõpuks saame need kaks ühendada oma esitluskomponendiga:

eksporti vaikekontakt (mapStateToProps, mapDispatchToProps) (MyComponent);

Kokkuvõttes

Selles artiklis on tutvustatud Typescripti koos Reactiga ja kuidas kasutada tslint-reageti sujuvamaks arenguks. Oleme külastanud, kuidas liidestada ja tippida teie rekvisiite ja olekut kogu teie komponentides, samuti kuidas juhtida Typescripti sündmustega. Lõpuks külastasime Typescripti integreerimist Reduxiga, integreerides tüüpe kogu Reduxi seadistuses.

Siit saate nüüd hõlpsasti uurida ametliku dokumentatsiooni kõiki Typescripti funktsioone.

Tüpikiri tõstab teie React projektidesse täiendavaid kaalutlusi, kuid täiendavad investeeringud keele toetamisse parandavad lõpuks teie rakenduste haldatavust nende mastaapides.

Modulaarsust ja lahterdamiskoodi edendatakse, kasutades Typescripti; omadused, millest keskmise suurusega ja suurema suurusega projektid tahavad kinni pidada. Pidage seda oma projektide kasvades meeles: kui leiate, et probleem on hooldatavuses, võib Typescript olla vastus loetavuse parandamiseks, vähendades samal ajal vigade tõenäosust kogu oma andmebaasis.