Share
React är ett JavaScript-bibliotek för att bygga användargränssnitt som har tagit webbutvecklingsvärlden med storm. Men i ett samhälle som gynnar val och flexibilitet kan det vara svårt att veta var man ska börja!
Oroa dig inte - vissa mönster och moduler har kommit fram som bästa praxis. En av dessa är Redux för att hantera applikationstillstånd.
I den här videon från min kurs på Modern Web Apps With React och Redux, visar jag dig hur du använder reagerar-redux paket.
Det är en bra praxis i Redux-applikationer för att skilja mellan presentationsdelar och behållarkomponenter. I den här videon ska jag förklara vad dessa är och hur vi kan använda dem.
Jag hänvisar till kod som vi redan har skapat i tidigare delar av kursen, men du borde kunna följa med och se vad jag gör. Du hittar fullständig källkod för kursen på GitHub.
Accentsconagua
reagerar-redux Paketreagerar-redux?I tidigare delar av kursen byggde vi en provapp med React och Redux. Men nästan alla våra komponenter behöver arbeta med affären, antingen genom att läsa specifika stater eller genom att skicka åtgärder tillbaka till affären. Kom ihåg att Redux-butiken rymmer hela staten för hela din ansökan. Det betyder att de flesta, om inte alla, av våra komponenter måste kunna komma åt butiken på något sätt.
Hittills har vi ett globalt affärsobjekt som vi kan komma åt direkt i det avsnitt där vi tilldelar egenskaper till sidofältet.
Men att ha en global butik så här är inte bra för många anledningar. En av de enklaste orsakerna är att den inte är global - den är endast tillgänglig från den här filen. Det betyder att vi skulle behöva använda den från den här filen eller vi måste börja överföra den från den här filen till andra filer, vilket blir mycket rörigt.
Om vi har många nestade komponenter, betyder det också att om en mellanliggande komponent inte verkligen behöver butiken utan att en av dess barn gör det, måste vi vidarebefordra den till den mellanliggande komponenten, eftersom den behöver det så att det kan överföra det till sitt barn.
Nu skulle det vara trevligt om det fanns något sätt att vi kunde ge alla våra komponenter tillgång till affären utan att ha en global variabel och utan att manuellt passera den.
Och sanningen är, det finns ett sätt. Vi kan använda ett paket som heter reagerar-redux. Du kan läsa lite mer om idéerna bakom detta paket om du går över till Redux-dokumentationen.
reagerar-redux ArbetarEn av huvudidéerna bakom detta paket är idén om presentationsdelar och behållarkomponenter. I grund och botten kan vi bryta vår ansökan upp i två uppsättningar av komponenter.
Den första uppsättningen är de presenterande komponenterna. Det handlar om hur saker ser ut. De behöver inte vara medvetna om Redux alls. De läser bara data från deras egenskaper, och de kan ändra data genom att åberopa callbacks som vi också tilldelar som egenskaper.
Containrar är å andra sidan medvetna om Redux, och de abonnerar specifikt på Redux-staten och skickar Redux-åtgärder. Vi kan skapa en behållarkomponent genom att enkelt lägga in en presentationsdel med några av dessa instruktioner.
Låt oss nu dyka in och se hur det här kan fungera. Vi ska använda sidofältet som ett exempel på en komponent som vi kan dela in i presentations- och behållarkomponenter.
Nu kan du vara lite förvirrad här hur vi ska dela upp vårt sidofält i två separata komponenter. Men sanningen är att behållarkomponenterna alltid kommer att vara inslagna presentationsdelar. Faktum är att du ofta har en presentationsdel som bara har ett jobb, och det ska vikas av en specifik behållarkomponent. Det är precis vad vi ska göra med sidofältet.
reagerar-redux Självklart måste vi börja med att installera React-Redux-biblioteket. Så låt oss göra npm installera - saves react-redux.
När det har installerats kan vi fortsätta och importera det med importera Provider från 'react-redux'; i vår huvudfil, app.js. I den här filen behöver vi faktiskt bara den leverantörskomponent som ges till oss av React Reduce.
Nu är leverantörskomponenten faktiskt den del av reagensreducer som kommer att ta vår butik och vidarebefordra den till dessa olika komponenter. Faktum är vad som händer bakom kulisserna, använder leverantören kontextfunktionen i React. Så om du har lite mer avancerad React-upplevelse och du har spelat runt med kontextet innan, kan det ge dig en inblick i hur exakt leverantören jobbar.
Leverantören gör det verkligen, verkligen enkelt att använda butiken överallt. Allt vi behöver göra är att paketera vår applikationskomponent på hög nivå i en leverantörskomponent, som visas här:
Och nu använder vår ansökan leverantören av reagensreducerande produkter.
ansluta() FungeraLåt oss nu öppna vår sidofältfil och låt oss importera ansluta() funktion från reagerar-redux. De ansluta() funktionen kan vi definiera exakt vilka egenskaper och funktioner vi vill ha en behållarkomponent att ha, och då kan vi ta den definitionen, tillämpa den på en presentationsdel och få en komplett React-komponent.
Nu förstår jag det som låter lite förvirrande. Så låt oss se hur det här görs.
Skönheten i sidofältet som vi redan har skrivit är att det faktiskt redan är en presentationsdel.
Först och främst är vårt sidofält bara riktigt oroad över hur sakerna ser ut. Det ger oss självklart styling, och det är inte med Redux alls. Vi har dessa metoder som vi kallar showAddDeck, addDeck, och hideAddDeck, men dessa metoder vet om Redux. Sidopanelen vet ingenting alls om Redux. Faktum är att om vi ville ta Redux ut ur detta projekt och använda något alternativ, kunde vi bara ändra definitionerna av dessa funktioner, och denna sidofältskomponent behöver inte förändras alls. Det ringer bara dessa funktioner.
Hur läser den data? Jo, det läser bara data från egenskaper som vi har gett det. Vad sägs om att ändra data? Tja, det anropar bara callbacks som är från egenskaper. Vi har tre metoder, och när det påstår dem ändras uppgifterna i affären. Och slutligen, ja, det är klart skrivet för hand. Och som du ser om en sekund, kommer behållarkomponenterna att genereras av reaktionsreduktion.
Så vi har redan en av de två bitarna vi behöver: det här sidofältet är en presentationsdel. Nästa sak vi vill göra är att ta dessa fastighetsdefinitioner som vi ger till sidofältet och istället för att definiera dem här definierar vi dem som en del av vår containerkomponent.
Så jag ska bara kopiera dessa rader:
Och jag ska klistra in dem på toppen här:
Nu är dessa egenskaper faktiskt snygga indelade i två uppsättningar: egenskaperna som är data och de egenskaper som är funktion att ringa, vilka utför åtgärder som ändrar butiken.
Så vad vi behöver göra nu är att skapa två funktioner som ska kartlägga staten till dessa egenskaper. Traditionellt inom React kallas dessa funktioner mapStateToProps och mapDispatchToProps.
Så låt oss gå vidare och börja med mapStateToProps. Detta är en funktion som kommer att få det senaste tillståndet från affären.
Vi behöver bara returnera ett objekt, som kommer att ha två egenskaper och, som vi redan såg, är de däck och addingDeck egenskaper. Så jag kan faktiskt bara kopiera och klistra in dem här eftersom det här är praktiskt taget samma data-vi behöver bara konvertera syntaxen till objektets bokstavs syntax istället för JSX-syntaxen.
Så det här är vårt mapStateToProps fungera. I grund och botten tar det bara det nuvarande tillståndet från affären, och det returnerar vilken data eller presentationsdel som behöver. Så det behöver den däck och den addingDeck egendom, och så returnerar vi dem inom ett objekt.
Vi kan göra några saker för att rengöra det här lite. Först och främst kan vi faktiskt bli av med dessa lockiga hängslen som är blocket för den här funktionen eftersom vi bara har ett uttalande att vi återvänder. Men då, för att vi bara har den ena raden, kan vi bli av med avkastningen.
Men nu har vi lockiga hängslen runt objektet bokstavligt, och JavaScript kommer att tro att det här är ett funktionsblock, så vi sätter in de inom parentes.
Vi kan förkorta detta lite mer, för att vi inte behöver hela statsobjektet, så vi kan bara använda den destruktiva syntaxen och säga att vi bara vill ha däck egendom och addingDeck egendom från det här objektet.
Naturligtvis, då, inom denna funktion, säger vi inte state.decks, vi säger bara däck. Och vi säger inte state.addingDeck, vi säger bara addingDeck. Och nu tror jag att du kan se vart vi går med det här, eftersom nyckeln och egendomen har samma namn, vi kan bli av med en av dem och vi kan bara säga däck och addingDeck.
Och det här är den kortare versionen av vår funktion tack vare ES6.
Så nu då mapDispatchToProps? Jo, det här är en funktion också, och det kommer att ta avsändande som den enda parametern. Försändelsen är naturligtvis butikens leveransfunktion.
Återigen kommer vi bara att returnera ett objekt bokstavligt, så glöm inte de parenteserna, och inuti behöver vi de tre egenskaper som vi har uppe på toppen: addDeck, showAddDeck, och hideAddDeck. Så nu har vi en funktion som kartlägger leveransfunktionen till de tre callbacks som vi behöver för en sidofält.
Så nu har vi allt vi behöver för att skapa vår behållarkomponent. Vi har två funktioner som ska kartlägga vårt statliga objekt i vår avsändningsfunktion till de egenskaper som den här funktionen behöver. Och vi har en presentativ komponent som förväntar oss dessa egenskaper.
Nu den ansluta() funktionen är vad vi kan använda för att ansluta dessa två kartläggningsfunktioner med en presentationsdel. Och vad den här anslutningsfunktionen kommer att returnera är vår behållarkomponent. Vi ska faktiskt inte skriva en annan komponent här, istället skickar vi dessa tre bitar till ansluta() funktionen, och det kommer att returnera vår behållarkomponent.
Så ner längst ner, i stället för att exportera sidofält, låt oss exportera ett samtal till ansluta(). Vi ska skicka det två parametrar-den mapStateToProps och mapDispatchToProps funktioner-och ansluta() kommer att returnera en ny funktion.
exportera standardkoppling (mapStateToProps, mapDispatchToProps) (Sidofält);
Nu vad som faktiskt exporteras från den här filen är inte en presentationsfält, men istället är det vår nya containerkomponent, som utanför denna funktion vi fortfarande kan beteckna som
Så det är det reagerar-redux paket i aktion. Du kan kontrollera kurskällans kursfiler på GitHub för att se hur koden fungerar fullt ut.
I hela kursen, Modern Web Apps With React och Redux, visar jag dig hur du börjar bygga moderna webbapps med React och Redux.
Från och med ingenting använder du dessa två bibliotek för att bygga en komplett webbapplikation. Du börjar med den enklaste möjliga arkitekturen och bygger långsamt upp appen, funktionen efter funktionen. Du kommer att lära dig om grundläggande begrepp som verktyg, reducerare och routing. Du lär dig också om några mer avancerade tekniker som smarta och dumma komponenter, rena komponenter och asynkrona åtgärder. I slutet har du skapat en komplett flashcards-app för att lära dig genom avståndsrepetition.
Längs vägen får du chansen att skärpa dina ES6 (ECMAScript 2015) färdigheter och lära dig de mönster och moduler som fungerar bäst med React och Redux!
Du kan också bygga på din kunskap om React med dessa kurser:
