Komme i gang med Redux Koble Redux med React

Dette er den tredje delen av serien om Komme i gang med Redux, og i denne opplæringen skal vi lære å koble en Redux-butikk med React. Redux er et uavhengig bibliotek som arbeider med alle de populære front-end-bibliotekene og rammene. Og det fungerer feilfritt med React på grunn av sin funksjonelle tilnærming.

Du trenger ikke å følge de forrige delene av denne serien for at denne veiledningen skal gi mening. Hvis du er her for å lære om å bruke React with Redux, kan du ta Quick Recap under og deretter sjekke koden fra forrige del og starte derfra. 

Quick Recap

I det første innlegget lærte vi om Redux-arbeidsflyten og besvarte spørsmålet, Hvorfor Redux? Vi opprettet en veldig enkel demo-applikasjon og viste deg hvordan de ulike komponentene i Redux-handlinger, reduksjonsmaskiner og butikken er koblet til.

I forrige innlegg begynte vi å bygge et kontaktlisteprogram som lar deg legge til kontakter og viser dem som en liste. Vi har opprettet en Redux-butikk for vår kontaktliste, og vi har lagt til noen reduksjoner og handlinger. Vi forsøkte å sende handlinger og hente den nye staten ved å bruke forretningsmetoder som store.dispatch () og store.getState ().

Ved slutten av denne artikkelen har du lært:

1. forskjellen mellom containerkomponenter og presentasjonskomponenter
2. om reaktor-redux-biblioteket
3. hvordan å binde reagere og redux bruke koble()
4. hvordan du sender forsendelser med mapDispatchToProps
   
5. hvordan å hente staten ved hjelp av mapStateToProps

Koden for opplæringen er tilgjengelig på GitHub i reagens-redux-demo-repo. Ta tak i koden fra v2 gren og bruk det som utgangspunkt for denne opplæringen. Hvis du er nysgjerrig på hvordan applikasjonen ser ut ved slutten av denne opplæringen, kan du prøve v3-grenen. La oss komme i gang.

Design av et komponenthierarki: Smart vs Dumb Components

Dette er et konsept som du sikkert har hørt om før, men la oss få en rask titt på forskjellen mellom smarte og dumme komponenter. Husk at vi opprettet to separate kataloger for komponenter, en oppkalt beholdere / og den andre komponenter /. Fordelen med denne tilnærmingen er at oppførselslogikken er skilt fra visningen.

De presentasjonelle komponentene sies å være dumme fordi de er bekymret for hvordan ting ser ut. De er koblet fra forretningslogikken til søknaden og mottar data og tilbakeringinger fra en overordnet komponent utelukkende via rekvisitter. De bryr seg ikke om søknaden din er koblet til en Redux-butikk hvis dataene kommer fra den lokale tilstanden til overordnet komponent. 

Beholderkomponentene, derimot, omhandler den adferdsmessige delen og bør inneholde svært begrenset DOM-oppskrift og stil. De sender dataene som må gjengis til de dumme komponentene som rekvisitter. 

Jeg har dekket emnet i dybden i en annen opplæring, Stateful vs Stateless Components in React.

Fortsett å se hvordan vi skal organisere komponentene våre.

Presentasjonskomponenter

Her er de presentasjonelle komponentene som vi skal bruke i denne opplæringen. 

komponenter / AddContactForm.jsx

Import Reakt fra 'reagere'; const AddContactForm = (onInputChange, onFormSubmit) => ( 
 
 Epostadresse  
 / * Noen kode utelatt for korthet * / 
 Adresse  
  Sende inn  
 ) eksport standard AddContactForm;

Dette er et HTML-skjema for å legge til en ny kontakt. Komponenten mottar onInputChange og onFormSubmit tilbakeringinger som rekvisitter. De onInputChange Hendelsen utløses når inngangsverdien endres og onFormSubmit når skjemaet blir sendt inn.

komponenter / ContactList.jsx

const ContactList = (rekvisitter) => retur ( 
 props.contactList.map ((contact) => 
  
 ) 
) eksporter standard kontaktliste;

Denne komponenten mottar en rekke kontaktobjekter som rekvisitter, derav navnet Kontaktliste. Vi bruker Array.map () metode for å trekke ut individuelle kontaktdetaljer og deretter viderebringe dataene til .

komponenter / ContactCard.jsx

const ContactCard = (contact) => retur ( 
 
 contact.photo! == undefined ?  :  
 
 contact.name + "+ contact.surname
 / * Noen kode utelatt for korthet * / 
 
 ) eksport standard ContactCard;

Denne komponenten mottar et kontaktobjekt og viser kontaktens navn og bilde. For praktiske applikasjoner kan det være fornuftig å være vert for JavaScript-bilder i skyen.

Containerkomponenter

Vi skal også konstruere barebeinbeholdere.

beholdere / Contacts.jsx

klasse Kontakter utvider komponent konstruktør (rekvisitter) super (rekvisitter); this.returnContactList = this.returnContactList.bind (dette);  returnContactList () // Hent kontaktliste fra butikken render () return ( 
  
  
 );  eksporter standardkontakter;

De returnContactList () funksjonen henter utvalget av kontaktobjekter og sender det til ContactList-komponenten. Siden returnContactList () henter dataene fra butikken, lar vi det logiske blanke for øyeblikket.

beholdere / AddContacts.jsx

klasse AddContact utvider komponent konstruktør (rekvisitter) super (rekvisitter); / * Funksjon bindende går her. Utelatt for korthet * / showAddContactBox () / * Logic for toggling ContactForm * / handleInputChange (event) const target = event.target; const value = target.value; const name = target.name; / * Logikk for å håndtere Input Change * / handleSubmit (e) e.preventDefault (); / * Logikk for å skjule skjemaet og oppdatere staten * / / * Gjør AddContactForm * / renderForm () return ( 
  
 ) render () return ( 
 / * En betinget erklæring går her som sjekker om skjemaet skal vises eller ikke * / 
 ) eksporter standard AddContact; 

Vi har opprettet tre barebehandler-metoder som samsvarer med de tre handlingene. De sender alle handlinger for å oppdatere staten. I gjengemetoden har vi utelatt logikken for å vise / gjemme skjemaet fordi vi må hente staten. 

La oss nå se hvordan å binde reagere og redusere sammen

Reaksjonsredusksbiblioteket

Reaksjonsbindinger er ikke tilgjengelige i Redux som standard. Du må installere et ekstra bibliotek kalt reaksjonsredus først. 

npm installere - lagre reaksjonsredusering 

Biblioteket eksporterer bare to APIer som du trenger å huske, a komponent og en høyere rekkefølge funksjon kjent som koble(). 

Leverandørkomponenten

Biblioteker som Redux trenger å gjøre butikkdataene tilgjengelige for hele React-komponent-treet, fra startkomponenten. Leverandørmønsteret gjør at biblioteket kan sende dataene fra topp til bunn. Koden nedenfor viser hvordan Leverandøren tilfeldigvis legger til tilstanden til alle komponentene i komponenttreet. 

Demo Code

importer Provider fra 'react-redux' ReactDOM.render (   , document.getElementById ('root'))

Hele appen må ha tilgang til butikken. Så pakker vi leverandøren rundt app-komponenten og legger til dataene vi trenger for treets kontekst. Etterkommerne til komponenten har da tilgang til dataene. 

De koble() Metode 

Nå som vi har sørget for butikken til vår søknad, må vi koble til React til butikken. Den eneste måten du kan kommunisere med butikken, er ved å sende handlinger og ved å hente staten. Vi har tidligere brukt store.dispatch () å sende handlinger og store.getState () for å hente siste snapshot av staten. De koble() kan du gjøre akkurat dette, men ved hjelp av to metoder kjent som mapDispatchToProps og mapStateToProps. Jeg har demonstrert dette konseptet i eksemplet nedenfor:

Demo Code

importer connect fra 'react-redux' const AddContact = (newContact, addContact) => retur ( 
  NewContact.name 
  NewContact.email 
  NewContact.phone 
 Er du sikker på at du vil legge til denne kontakten?  Ja  
 ) const mapStateToProps = state => return newContact: state.contacts.newContact const mapDispatchToProps = dispatch => return addContact: () => send (addContact ()) eksporter standardkobling (mapStateToProps, mapDispatchToProps )(Legg til kontakt)

mapStateToProps og mapDispatchToProps begge returnerer et objekt, og nøkkelen til dette objektet blir en prop av den tilkoblede komponenten. For eksempel, state.contacts.newContact er kartlagt til props.newContact. Handlingsskaperen Legg til kontakt() er kartlagt til props.addContact.  

Men for at dette skal fungere, trenger du den siste linjen i kodestykket ovenfor. 

eksporter standardkobling (mapStateToProps, mapDispatchToProps) (AddContact)

I stedet for å eksportere Legg til kontakt komponent direkte, eksporterer vi en tilkoblet komponent. Koblingen gir Legg til kontakt og ny kontakt som rekvisitter til komponent. 

Slik kobler du til React og Redux

Deretter skal vi dekke trinnene du må følge for å koble til React og Redux.

Installer reagens-redux-biblioteket

Installer reagens-redux-biblioteket hvis du ikke allerede har det. Du kan bruke NPM eller Garn til å installere det. 

npm installere reagere-redux -save 

Gi butikken til din App-komponent

Lag butikken først. Deretter gjør butikkobjektet tilgjengelig for komponenttreet ditt ved å sende det som et forsøk på .

index.js

Import Reakt fra 'reagere'; importer render fra 'react-dom'; importer Provider fra 'react-redux' importer app fra './App'; import configureStore fra './store' const store = configureStore (); gjengi (   , document.getElementById ('root'))

Koble reagensbeholdere til Redux

Koble-funksjonen brukes til å binde React-beholdere til Redux. Hva det betyr er at du kan bruke tilkoblingsfunksjonen til å:

1. abonnere på butikken og kartlegge sin tilstand til rekvisitter
2. forsendelseshandlinger og kartlegg forsendelsesanropene i rekvisitter

Når du har koblet søknaden din til Redux, kan du bruke this.props for å få tilgang til nåværende tilstand og også for å sende handlinger. Jeg skal demonstrere prosessen på Legg til kontakt komponent. Legg til kontakt må sende tre handlinger og få tilstanden til to eiendommer fra butikken. La oss se på koden.

Først importere koble inn i AddContact.jsx.

importer connect fra 'react-redux'; 

For det andre, opprett to metoder: mapStateToProps og mapDispatchToProps.

funksjonskartStateToProps (state) return isHidden: state.ui.isAddContactFormHidden, newContact: state.contacts.newContact funksjonsoversiktDispatchToProps (send) return onFormSubmit: (newContact) => send (addContact (newContact)); , onInputChange: (navn, verdi) => dispatch (handleInputChange (navn, verdi)); , onToggle: () => send (toggleContactForm ()); 

mapStateToProps mottar butikkens tilstand som et argument. Det returnerer et objekt som beskriver hvordan butikkens tilstand er kartlagt i rekvisitter. mapDispatchToProps returnerer et lignende objekt som beskriver hvordan forsendelseshandlingene er kartlagt til rekvisitter. 

Til slutt bruker vi koble å binde Legg til kontakt komponent til de to funksjonene som følger:

eksporter standardkobling (mapStateToProps, mapDispatchToProps) (AddContact) 

Oppdater beholderkomponentene for å bruke rekvisita

Komponentens rekvisitter er nå utstyrt for å lese tilstand fra butikken og forsendelsesaksjonene. Logikken for handeInputChange, handleSubmit og showAddContactBox bør oppdateres som følger:

 showAddContactBox () const onToggle = this.props; onToggle ();  handleInputChange (event) const target = event.target; const value = target.value; const name = target.name; const onInputChange = this.props; onInputChange (navn, verdi);  handleSubmit (e) e.preventDefault (); this.props.onToggle (); this.props.onFormSubmit (); 

Vi har definert håndteringsmetodene, men det mangler fortsatt en del - den betingede setningen inne i gjengi funksjon.

gjengivelse () retur ( 
 this.props.isHidden === false? this.renderForm ():  Legg til kontakt  
 )

Hvis IsHidden er feil, skjemaet gjengis. Ellers blir en knapp gjengitt. 

Viser kontaktene

Vi har fullført den mest utfordrende delen. Nå er alt som er igjen å vise disse kontaktene som en liste. De Kontakt beholder er det beste stedet for den logikken. 

Import React, Component fra 'reagere'; importer connect fra 'react-redux'; / * Komponentimport utelatt for korthet * / klasse Kontakt utvider Komponent konstruktør (rekvisitter) super (rekvisitter); this.returnContactList = this.returnContactList.bind (dette);  returnContactList () returner this.props.contactList;  gjengivelse () retur ( 
 
  
  
 );  funksjonskartStateToProps (state) return contactList: state.contacts.contactList eksporter standardkobling (mapStateToProps, null) (Kontakt); 

Vi har gått gjennom samme fremgangsmåte som vi fulgte over for å koble kontakten med Redux-butikken. De mapStateToProps funksjonen kartlegger butikkobjektet til kontaktliste Rekvisitter. Vi bruker deretter koble til å binde propsverdien til kontaktkomponenten. Det andre argumentet til koblingen er null fordi vi ikke har noen handlinger som skal sendes. Det fullfører integrasjonen av vår app med staten Redux-butikken. 

Hva nå?

I neste innlegg, tar vi en dypere titt på mellomvare og begynner å sende ut handlinger som innebærer å hente data fra serveren. Del dine tanker i kommentarene!