Kuinka rakentaa reagoivan alkuperäisen sovelluksen mittakaavaan

Tässä on esimerkkihanke, joka osoittaa tässä artikkelissa käsitellyt käsitteet.

Keskustelemme lähestymistavasta suurten React Native -sovellusten arkkitehtuuriin - luulen mahtavaksi.

Oppiminen ja rakentaminen React Nativen (RN) kanssa on ollut vähintäänkin mielenkiintoinen, innovaatioiden nopeuden ja ekosysteemimuutosten vauhdilla (älä unohda, emme ole vielä versiossa 1.0!).

Aloitin särkyvien lelujen rakentamisen ja jouduin piti rakentamaan suuri (yritystoiminnan) sovellus - ja sitten takertuin. Mihin sijoittaa mitä? Kuinka yhdistää järjestelmän eri komponentit? ja kaikki ne kysymykset, jotka liittyvät ratkaisun arkkitehtuuriin alusta alkaen.

Ennen kuin tutustumme toteutuksen yksityiskohtiin, korostan työkaluja, jotka vaikuttivat tähän arkkitehtuurivalintaan:

  • react-navigation - Sovelluksen navigointi
  • redux - Sovellustilan hallinta
  • redux-thunk - Mahdollistaa toimintojen asynkronisen lähettämisen
  • jest - Javascript-testaus
  • uudelleenvalinta - valitsimen kirjasto Reduxille
  • axios - Http-asiakas
  • fastlane - automaatiotyökalu

Kuinka olen oppinut rakentamaan sovellusmoduuleja.

Yllä oleva rakenne (tyyppipohjainen) oli ollut mennäni edellisiin kevyisiin sovelluksiin, koska siitä on helppo päätellä, myös sovelluskomponentit näyttivät erittäin näkyviltä, ​​joten aloitin sen kanssa. Kun sovelluksen laajuus alkoi kasvaa, huomasin, että lisäsin tiedostoja ennalta määritettyihin kansioihin ja jouduin tekemään matkoja kansioiden (moduulien) yli työskentelemällä yhden ominaisuuden tai korjauksen parissa. Aina ei, jokainen moduuli paisunut tiedostoilla. Myös kansioiden selaus, kun pidät toteutuksen virtauksen mielenkiinnosta, tuli tuskaa. Tästä lähestymistavasta tuli selvästi mahdoton.

Parempi lähestymistapa:

Koska muut yllä olevat tiedostot ja kansiot (jotkut katkaistuina) ovat yleensä osa react-native-oletusasennusta, keskitymme src-kansioon:

ohituskaista/

Tämä kansio, kuten saatat huomata, on samalla tasolla kuin src. Se sisältää kokoonpanologiikan käyttöönottoa varten sekä muita julkaisuun liittyviä tehtäviä. Katso fastlane-verkkosivustolta lisätietoja.

src /

Kuten yllä olevasta viitatusta kuvakaappauksesta nähdään, keskustelemme tämän rakenteen taustalla

API /

Tämä kansio sisältää ulkoisiin sovellusliittymiin liittyvän logiikan, se sisältää:

  • vakiot.js - missä kaikki vaadittavat staattiset arvot on tallennettu.
  • helper.js - uudelleen käytettävän logiikan tallentamiseksi.
  • yksittäiset ominaisuustiedostot - Jokainen ominaisuustiedosto sisältää tietyn ominaisuuden api-viestinnän logiikan.

varat /

Aivan kuten nimestä voi päätellä, tässä on staattisia tiedostoja (esim. Kuvia), joita käytetään sovelluksessa.

komponentit /

Ominaisuuksissa käytetyt jaetut komponentit sijoitetaan tähän hakemistoon. Esimerkki sellaisesta (kuten yllä on esitetty) on asettelukomponentti, jota käytetään kääriä sovelluskomponentit ja määrittämään sen yleinen asettelu.

ominaisuudet/

Suurin osa tästä arkkitehtuurista: ominaisuuskansio, koostuu moduulista jokaiselle sovelluksen ominaisuudelle.

Tarkastellaan / tutkia / moduulia tarkemmin:

/toimet

Kuten useimmissa reagoida / reagoida-alkuperäinen sovellus. Tämä kansio sisältää tämän ominaisuuden toiminnan luojat.

/ komponentit

Täällä sijoitamme tutkimusominaisuuden komponentit ja niihin liittyvät tyylit

/ kontit

Ominaisuuden redux-logiikka on sijoitettu tähän. Tätä käyttötapaa varten on yksi (näyttöä edustava) säilö, jota viedään, joten sijoitimme sen hakemistotiedostoon.

Tässä on /containers/index.js näyttää:

Jokaisella ominaisuudella on pelkistin, joka mutatoi oman osion sovellustilasta. Kaikki pelkistimet yhdistetään myöhemmin käyttämällä reduxin combReducer-toimintoa.

/ valitsimet

Tämä saattaa tuntua hieman omituiselta joillekin meistä, mutta arkkitehtuurimme tähän segmenttiin vaikuttaa uudelleenvalintapaketti, jonka avulla voimme laskea tehokkaasti johdetut tiedot sovelluksemme tilasta.

Tässä arkkitehtuurissa ryhmitelimme sovelluksen valitsimet ominaisuusperustaiseksi, jotta sovelluksen eri näkökohtien välinen vuorovaikutus olisi helppo ymmärtää. Lisätietoja uudelleenvalinnan toiminnasta löytyy täältä.

/constants.js

Tämä tiedosto sisältää ominaisuudessa käytettyjä staattisia arvoja. Esimerkki siitä, mitä voisimme tallentaa tänne, on ACTION_TYPES-tiedot.

Tämä on toinen komponentti arkkitehtuurissamme, johon react-paketti vaikuttaa hieman

Sovelluksen laajuuden vuoksi emme luottaisi navigointiin out-of-the-box tällä.props.navigation -sovelluksella, vaan yhdistäisimme sovelluksen navigoinnin sovelluksen yleiseen tilaan. Tämä tarkoittaa, että redux-tukema myymälämme olisi tietoinen navigointitilasta.

Antaa tutkia moduulin eri hakemistojen roolit.

/toimet

Tämä sisältää logiikan joukolle navigointikohtaisia ​​toimintojen luomijoita, joten toimintojen / index.js-sisältö näyttäisi enimmäkseen:

Kuten olet saattanut huomata, tuomme NavigationActions -objektin reakt-navigointipaketista natiivinavigoinnin toteuttamiseksi; ne tarjoavat myös todella upean dokumentoinnin!

/ kontit

Tässä yhdistämme navigointilogiikkamme sovellustilaan - käyttämällä mapStateToProps ja mapDispatchToProps. Tämän konttikomponentin logiikka näyttäisi jonkin verran seuraavalta:

Tämän moduulin tulopiste on index.js-tiedosto, ja se näyttää siltä:

Tämä tulopistenavigaattoritiedostot toimii juurnavigaattorina koko sovellukselle, ja se on tuotu edellisen osan /containers/index.js-tiedostoon.

Se yhdistää kaikki navigaattorit sovelluksen eri kohtauksista ja linkittää ne pääsyreitteihinsä. Yhdistämisen lisäksi se reitittää myös yksittäisiin kohtauksiin tarvittaessa (kuten Splash-reitin kohdalla on yllä).

Tämän koodin yläosassa näemme, että muita kohtauspohjaisia ​​navigointeja tuodaan. Kohtauksen navigaattori voisi pitää tästä:

Sinulla voi olla useita kohtauspohjaisia ​​navigaattoreita sovelluksesi vaatimusten mukaan. tärkeintä on tuoda ne vanhempaan navigointilaitteeseen ja muodostaa yhteys sopivalle reitille.

/ pienennyslaitteet

Koska sovelluksemme navigointitiedot vievät nyt osan sovelluksen tilasta, tarvitsisimme pelkistimen päivittääksesi tämän viipaleen oikein käynnistyneiden toimien perusteella. Verrattuna muihin sovelluksemme reduktoreihin, tällä on erikoistunut toteutus sekä alkutilaan että pelkistimeen:

https://gist.github.com/anosikeosifo/f0df960c177dfb57c4f7ed5e4557704c

pienennyslaitteet /

Tämä on sovellustason vähennysventtiili. Sen tehtävänä on yhdistää eri ominaisuustason vähentäjät reduxin combReucers-toiminnolla.

Tässä on kuinka reduktorit / index.js näyttävät:

tyylit /

Tämä moduuli sisältää sovellustason tyylimme. joihin viitataan sitten yksittäisissä komponenteissa käyttämällä React Nativen monityylistä syntaksia alla olevassa esimerkissä:

...

index.js

Tämä on sovellustiedosto, se kääri sovelluksen aikaisemmin keskusteltuamme asetteluun ja yhdistää sovelluksen myymälään reduxin tarjoajan korkeamman tilauksen komponentin avulla.

Se näyttää tältä:

myStore.js

tämä sisältää kaupan luomislogiikan.

Hei, tämä on pitänyt olla melko kauan luettu!

Vaikka tämä ei ole kattava *, toivon, että pidät siitä oivaltavaa ja hyödyllistä. Olisin iloinen, jos voisit kertoa ajatuksistasi ja mielipiteistäsi tästä sekä siitä, miten etenevät suurten RN-sovellusten toteuttamisessa.

  • Jotta voin keskittyä artikkelin tarkoituksen ytimeen, vältin syventämästä yksityiskohtia eri __tests_-moduuleista.

Lisäresurssit:

  • Reagoi navigointi
  • Kuinka järjestää React-sovelluksesi paremmin?
  • React Native + MobX -sovelluksen jäsentäminen oikealla tavalla
  • Reagoi alkuperäiset Fastlane- ja Crashlytics Beta -sovelluksissa

Alun perin julkaistu osoitteessa www.uxenthusiast.com 30. joulukuuta 2017.

Tarvitseeko sinun palkata huippukehittäjiä? Keskustele Andelan kanssa auttaaksesi sinua mittakaavassa.
Haluatko kiihdyttää uraasi kehittäjänä? Andela palkkaa tällä hetkellä vanhempia kehittäjiä. Hae nyt.