Kuinka integroida React Redux ja Firebase 3 yksinkertaiseen vaiheeseen

Tässä artikkelissa opit kuinka:

  • Luo sovellukselle yksinkertainen käyttöliittymä Reaktin avulla
  • Liitä Redux-kauppa React-sovellukseen
  • Yhdistä Firebase-reaaliaikainen tietokanta Redux-kauppaan
  • Yhdistä nämä 3 asiaa luodaksesi täysin toimivan tehtäväsovelluksen

Ennen kuin sukellamme näihin kolmeen pylvääseen. Näin näyttää sovelluksen virta. Komponentti käynnistää toiminnan. Tämä toimenpide tekee joitain pyyntöjä Firebase-reaaliaikaisessa tietokannassa. Sitten Firebase-tieto menee pelkistimeemme. Pelkistimestä myymälään. Ja myymäläkomponentti voi käyttää tietoja. Ei mitään hienoa, mutta se saa työn suoritettua.

Sovellusvirta integroimalla Firebase

Yksinkertaisen käyttöliittymän luominen

Aiomme luoda luo-reagoi-sovelluspaketin tuottaaksemme kattilalevyn. Jos sinulla ei vielä ole, suorita vain asennusohjelma npm install -g create-react-app. Siirry sen jälkeen hakemistoon, johon haluat projektisi sijainnin, ja suorita luoda-reagoida-sovellus reagoi-redux-firebase tai mikä tahansa nimi, jonka pidät sopivana. Poista tarpeettomat tiedostot src-hakemiston sisällä. Jätä siellä vain index.js App.js ja registerServiceWorker.js. Älä koske registerServiceWorker.js. Muut tiedostot näyttävät seuraavilta.

Okei. Meillä on hyvä lähtökohta. Nyt on ihanteellinen aika luoda Redux-kauppa sovelluksellemme ja kytkeä se.

Redux-kaupan liittäminen React-sovellukseen

Kauppa on missä kaikki sovelluksemme tiedot ovat. Kun komponentti tarvitsee tietoja. Yhdistämme sen vain myymälään ja pääsemme sitten itse komponentin tietoihin. Jotta niin voimme tehdä, meidän on ensin asennettava pari pakettia. Sisäinen projektiohjaus

npm install - säästää redux react-redux redux-thunk

Okei ... Meillä on kaikki riippuvuudet kaupan luomisesta. Luomme nyt pelkistimet-moduuli. Luo src-hakemistossa uusi kansio, nimeltään pelkistimet. Pienennyshakemistojen sisällä luoda tiedosto dataReducer.js. Nyt pelkistin on vain yksinkertainen toiminto, jolla on 2 argumenttia. Alkutila ja toiminta. Kaikki komponentista laukaisevat toimenpiteet käyvät läpi kaikki pelkistimet. Nyt jokainen pelkistin tarkistaa toimintotyypin ja jos tyypin vähennyslaite tietää, se päivittää varastossa olevat tiedot.

Näin supistuksemme näyttää. Se tarkistaa, onko toimintotyyppi FETCH_TODOS, ja päivittääkö se toimintotyyppiluettelon. Luo nyt vähennyshakemiston sisällä tiedosto index.js. Tämä on lähtökohta pelkistimillemme. Voimme yhdistää täällä useita pelkistimiä. Tapauksessamme meillä on vain yksi, mutta jos sovellus kasvaa tulevaisuudessa, tarvitsemme varmasti useita pelkistimiä.

Jos lisäisimme uuden pelkistimen, luomme vain uuden tiedoston pelkistimien hakemistoon. Tuo sitten se. Ja lopuksi lisää se yhdistääReducer-toiminto. Tämä toiminto vie kaikki pelkistimet ja yhdistää ne yhdeksi. Ja kertoo myös mikä vähennysventtiili on vastuussa mistä varastossa olevista tiedoista.

Nyt kun olemme saaneet pelkistysmoduulin valmiiksi, voimme luoda kaupan ja liittää sen sovellukseemme. Avaa projektin juurihakemisto index.js. Tässä tiedostossa sanomme, että haluamme tehdä sovelluskomponentin. Jotta sovellus voidaan liittää tallennukseen, meidän on käärittävä se palveluntarjoajakomponenttiin. Palveluntarjoaja ottaa kauppapaikan, joka edustaa sovelluskauppaa. Kaupan luomiseen käytetään helper-menetelmää redux-paketista. Tämä menetelmä vie pelkistimet, välituotteet, jos haluamme käyttää joitain ja luo myymälän. Index.js näyttää täsmälleen tältä. Ja siinä se on. Nyt meillä on tallennettu yhteys sovellukseemme.

Firebase-reaaliaikaisen tietokannan yhdistäminen Redux-kauppaan

Tämä vaihe voi näyttää kovalta osalta, mutta se on todella helppoa. Asennamme ensin riippuvuudet ja erittelemme kuinka Firebase-tietokanta toimii.

npm install - tallenna palotietokanta

Nyt meidän on alustettava Firebase sovelluksellemme. Luo uusi hakemistokokoonpano ja luo sisälle uusi tiedosto firebase.js. Täällä tuomme firebase SDK: n alustamaan sovelluksen luominen tietokannan viite ja viedä se. Käytämme tietokantaviitettä todoihin luodaksesi uusia välilehtiä tai täydentääksesi niitä myöhemmin toimintamodulissa. Saatat kysyä, mikä on FirebaseConfig-objekti. Luomme sen myöhemmin, kun näytän sinulle kuinka luoda oma Firebase-sovelluksesi.

Ennen kuin siirrymme toimintamoduuliin, kerrotaan, kuinka Firebase-reaaliaikainen tietokanta toimii. Tallennamme tapauksessamme tehtäväluettelo tietokantaan. Kutsumme heitä ”todoiksi”. Liitämme kuuntelijan tähän tehtäväluetteloon, ja joka kerta kun luettelo muuttuu, sovelluksemme tietää, että tiedoissa tapahtui muutos. Se noutaa uudet tiedot Firebase-tietokannasta ja näyttää sen sitten. Tämä tarkoittaa, että meidän ei tarvitse kertoa sovelluksellemme hakea tietoja uudelleen, kun luot uuden tehtävän tai suoritamme sen. Sovelluksemme tietää sen.

Luotaan nyt toimintomoduuli. Luo uusia kansiotoimintoja src-hakemiston sisällä. Ja luo täällä tiedostoja index.js ja tips.js. Tyyppitiedosto tallentaa vain merkkijonovakiot toimintotyypeille. Hakemisto on toimintomoduulimme lähtökohta ja sisältää tarkalleen 3 toimintoa. addToDo aikoo lisätä uuden tehtävän sarkkien luetteloon, completeToDo poistaa sen. Ja fetchToDos kuuntelee muutoksia ja jos niitä on, se noutaa tiedot. Sitten se kutsuu lähetysmenetelmää. Tämä menetelmä vie yhden argumentin, joka on objekti tyypin ja hyötykuorman kanssa. Tyyppi edustaa toiminnan tyyppiä, jotta pelkistin tietää, pitäisikö sen käsitellä toimenpide. Ja hyötykuorma edustaa todellista tietoa.

Nyt on aika liittää kaikki nämä asiat yhteen React-komponentin avulla. Ensin luodaan ensin oma Firebase-sovelluksesi

Firebase-sovelluksen luominen

  1. Siirry osoitteeseen https://console.firebase.google.com/u/0/
  2. Kirjaudu sisään google-tililläsi ja napsauta sitten Lisää projekti
  3. Aseta projektin nimi ja alue ja napsauta Luo projekti
  4. Sinun pitäisi nähdä Firebase-kojelauta
Firebase-kojelauta

Luomme nyt Firebase-asetustiedosto, joka kertoo Firebase SDK: lle, mitä sovellusta käytämme. Luo avaimet.js konfigurointihakemiston sisällä. Tämä tarkistaa, olemmeko tuotantotilassa vai ei. Asia, jota et halua jakaa avaimille. Luomme dev.js ja prod.js. Kehitystiedosto sisältää todelliset merkkijonot, mutta et koskaan julkaise tätä tiedostoa. Tuotetiedosto viittaa vain ympäristömuuttujiin.

Nyt sinun on vain täytettävä dev.js todellisilla arvoilla. API-avain ja projektitunnus löytyvät projektiasetuksista Firebase-kojelaudan sisällä. Asenna tietokanta noudattamalla näitä ohjeita

Sen jälkeen näet tietokannan URL-osoitteen. Sen pitäisi olla

.firebaseio.com”

Kirjoita kaikki nämä arvot dev.js: lle ja Firebase-sovelluksesi on kytketty firebase SDK: hon. Nyt on aika liimata kaikki nämä osat yhteen ja tulos on toimiva sovellus

Yhdistämällä kaikki yhdessä

Saimme kaikki asiat valmiiksi nyt, meidän on vain luotava 2 komponenttia ja kytkettävä ne varastoon. Meillä on ToDoListItem ja ToDoList.

Luo uusia hakemistokomponentteja src-hakemiston sisällä. Täällä luodaan ToDoListItem.js. Tämä komponentti vain todellinen tehtävä. Se näyttää, mikä on todellinen tehtävä, ja se sisältää painikkeen. Kun painiketta napsautetaan. Tehtävä on suoritettu ja poistettu. Käytämme CompleteToDo-toimintoa tässä komponentissa. Liittääksemme toiminnot tähän komponenttiin käytämme yhteysmenetelmää. Se vie 2 väitettä. Ensimmäinen on toiminto, joka ottaa dataa varastosta, ja toinen on esineitä sisältävät toiminnot.

Nyt ToDoList-komponentti. Se sisältää yksinkertaisen muodon uuden tehtävän luomiseen. Tämä lomake tulee näkyviin, kun napsautamme Lisää-painiketta. Ja se katoaa, kun napsautamme sitä uudelleen. Tämä komponentti käynnistää addToDo-toiminnon lomaketta lähetettäessä. Ja se kuuntelee muutoksia tietokannassa fetchToDos-toiminnolla. Käytämme jälleen yhteysmenetelmää. Tällä kertaa se vie myös mapStateToProps-toiminnon. Siellä kerromme, että haluamme käyttää tietoja myymälästä. Jos varastossa olevia tietoja päivitetään, myös komponentti päivitetään. Lopuksi luodaan myös CSS-tiedosto tälle komponentille ja tuoda se.

Meillä on kaikki valmiina. Nyt viimeinen tehtävä on vaihtaa sovelluskomponentti ToDoListiksi. Ja sovelluksemme on valmis.

Ja siinä se oli. Olemme luoneet myymälän, jossa on reduktorit ja liittäneet sen sovellukseemme. Loimme toimintamoduulin ja käynnistämme nämä toiminnot komponenteissamme. Loimme 2 komponenttia. Komponentti on kytketty kauppaan ja se voi myös laukaista toimia. Ja tämä johti toimivaan ToDo-sovellukseen. Sovelluksen lähdekoodi on saatavana Githubista.

Huono asia on, että sitä voidaan käyttää useiden käyttäjien kanssa. Koska nyt emme seuraa, kenelle tehtävä kuuluu. Teemme sen seuraavassa viestissä. Näytämme kuinka tehdä valtuutus firebase-sovelluksella ja siirrämme sovelluksen todelliseen maailmaan.

Kiitos huomiostanne. Jos pidit tarinasta ja olet oppinut jotain uutta, kerro maailmalle taputtamalla. Jos haluat nähdä lisää, paina Seuraa-painiketta. Luon tämänkaltaisia ​​opetusohjelmia joka viikko. Jos et ole perehtynyt reagointiin, minulla on sarja oppaita, joilla pääset alkuun. Voit tarkistaa ne täältä https://medium.com/@bernardbad. Kiitos huomiosta ja nähdään seuraavalla kerralla.