Share
React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces die de webontwikkelwereld stormenderhand heeft veroverd. In een gemeenschap die voorkeur en flexibiliteit biedt, kan het echter moeilijk zijn om te weten waar te beginnen!
Geen zorgen, sommige patronen en modules zijn naar voren gekomen als best practices. Een daarvan is Redux voor het beheren van de applicatiestatus.
In deze video van mijn cursus over moderne webapps met React en Redux, zal ik je laten zien hoe je de reactie-redux pakket.
Het is een goede praktijk om in Redux-toepassingen een onderscheid te maken tussen presentatiemiddelen en containercomponenten. In deze video zal ik uitleggen wat deze zijn en hoe we ze kunnen gebruiken.
Ik verwijs naar de code die we al in eerdere delen van de cursus hebben gemaakt, maar je zou moeten kunnen volgen en zien wat ik aan het doen ben. Je kunt de volledige broncode voor de cursus vinden op GitHub.
Accentsconagua
reactie-redux Pakketreactie-redux?In eerdere delen van deze cursus hebben we een voorbeeldapp gebouwd met React en Redux. Bijna al onze componenten moeten echter met de winkel werken, door specifieke toestanden te lezen of acties terug naar de winkel te sturen. Vergeet niet dat de Redux-winkel de volledige staat voor uw hele toepassing bevat. Dit betekent dat de meeste, zo niet alle onderdelen van onze winkel op de een of andere manier toegang tot de winkel moeten hebben.
Tot nu toe hebben we een wereldwijd winkelobject dat we rechtstreeks kunnen openen in de sectie waar we eigenschappen toewijzen aan onze zijbalk.
Het hebben van een dergelijke wereldwijde winkel is om veel redenen echter niet geweldig. Een van de eenvoudigste redenen is dat het niet echt wereldwijd is - het is alleen toegankelijk vanuit dit bestand. Dat betekent dat we het vanuit dit bestand zouden moeten gebruiken of dat we het vanuit dit bestand moeten doorgeven aan andere bestanden, wat erg rommelig zal worden.
Als we veel geneste componenten hebben, betekent dit dat als een tussencomponent de winkel niet echt nodig heeft maar een van zijn kinderen dat wel doet, we het hoe dan ook moeten doorgeven aan die tussencomponent omdat het heeft het nodig om het aan zijn kind door te geven.
Het zou nu leuk zijn als we op een of andere manier al onze componenten toegang tot de winkel zouden kunnen geven zonder een globale variabele te hebben, en zonder deze handmatig door te geven.
En de waarheid is, er is een manier. We kunnen een pakket gebruiken genaamd reactie-redux. U kunt meer lezen over de ideeën achter dit pakket als u naar de Redux-documentatie gaat.
reactie-redux WerkenEen van de belangrijkste ideeën achter dit pakket is het idee van presentatiecomponenten en containercomponenten. Kortom, we kunnen onze applicatie opsplitsen in twee sets componenten.
De eerste set is de presentatiecomponenten. Deze houden zich bezig met hoe de dingen eruit zien. Ze hoeven helemaal niets van Redux te weten. Ze lezen gewoon gegevens uit hun eigenschappen en ze kunnen gegevens wijzigen door callbacks aan te roepen die we ook toewijzen als eigenschappen.
Containers zijn daarentegen op de hoogte van Redux en zij onderschrijven specifiek de Redux-status en sturen Redux-acties. We kunnen een containercomponent creëren door eenvoudigweg een presentatieonderdeel in te pakken met enkele van deze instructies.
Laten we nu duiken en zien hoe dit kan werken. We gaan de zijbalk gebruiken als een voorbeeld van een component die we kunnen splitsen in presentaties en containercomponenten.
Nu, je bent misschien een beetje in de war hoe we onze zijbalk gaan opsplitsen in twee afzonderlijke componenten. Maar de waarheid is dat containercomponenten altijd presentatie-onderdelen gaan omhullen. In feite heeft u vaak een presentatieonderdeel dat slechts één taak heeft en dat moet worden ingepakt door een specifiek containeronderdeel. Dat is precies wat we met de zijbalk gaan doen.
reactie-redux Natuurlijk zullen we beginnen met het installeren van de react-redux-bibliotheek. Laten we het doen npm installeren - opslaan react-redux.
Wanneer dat is geïnstalleerd, kunnen we doorgaan en importeren met behulp van importeer Provider van 'react-redux'; in ons hoofdbestand, app.js. In dit bestand hebben we eigenlijk alleen de providercomponent nodig die ons is gegeven door react-redux.
Nu is de component van de provider eigenlijk het deel van react-redux dat onze winkel gaat ophalen en doorgeven aan deze verschillende componenten. Wat er feitelijk gebeurt, is dat achter de schermen de provider de contextfunctie van React gebruikt. Dus als je een beetje meer geavanceerde React-ervaring hebt en eerder hebt gespeeld met de context, zou dat je inzicht kunnen geven in hoe de provider precies werkt.
De provider maakt het echt, heel eenvoudig om de winkel overal te gebruiken. Het enige dat we moeten doen, is ons hoofdtoepassingsonderdeel omwikkelen met een providercomponent, zoals hier wordt weergegeven:
En nu maakt onze applicatie gebruik van de react-redux-provider.
aansluiten() FunctieLaten we nu ons zijbalkbestand openen en het importeren aansluiten() functie van reactie-redux. De aansluiten() functie stelt ons in staat om precies te definiëren welke eigenschappen en functies we een containercomponent willen hebben, en dan kunnen we die definitie nemen, toepassen op een presentatiecomponent en een volledige React-component krijgen.
Nu begrijp ik dat dat een beetje verwarrend klinkt. Laten we dus kijken hoe dit is gebeurd.
De schoonheid van de zijbalk die we al hebben geschreven, is dat het eigenlijk al een presentatie-onderdeel is.
Allereerst houdt onze zijbalk zich alleen echt bezig met hoe de dingen eruit zien. Het geeft ons natuurlijk een opmaakstyling, en het is helemaal niet bekend bij Redux. We hebben deze methoden die we noemen showAddDeck, addDeck, en hideAddDeck, maar die methoden weten van Redux. De zijbalk zelf weet helemaal niets over Redux. Als we Redux eigenlijk uit dit project wilden halen en een alternatief wilden gebruiken, konden we de definities van deze functies gewoon veranderen, en dit onderdeel van de zijbalk hoeft helemaal niet te veranderen. Het roept gewoon deze functies op.
Hoe leest het gegevens? Nou, het leest gewoon gegevens van eigenschappen die we het hebben gegeven. Hoe zit het met het wijzigen van gegevens? Nou, het roept gewoon callbacks op die van eigenschappen zijn. We hebben drie methoden, en wanneer het die oproept, worden de gegevens in de winkel gewijzigd. En tenslotte, natuurlijk, ja, het is met de hand geschreven. En zoals u zult zien in een seconde, zullen containercomponenten gegenereerd worden door react-redux.
We hebben dus al een van de twee onderdelen die we nodig hebben: deze zijbalk is een presentatiecomponent. Het volgende dat we willen doen is deze eigenschapsdefinities die we aan de zijbalk geven, en in plaats van ze hier te definiëren, zullen we ze definiëren als onderdeel van onze containercomponent.
Dus ik ga deze regels gewoon kopiëren:
En ik plak ze hier bovenaan:
Nu zijn deze eigenschappen eigenlijk goed opgesplitst in twee sets: de eigenschappen die gegevens zijn en de eigenschappen die functies zijn om te callen, die acties uitvoeren die de winkel veranderen.
Dus wat we nu moeten doen, is twee functies creëren die de staat aan deze eigenschappen toewijzen. Traditioneel binnen React worden deze functies genoemd mapStateToProps en mapDispatchToProps.
Dus laten we beginnen en beginnen mapStateToProps. Dit is een functie die de laatste staat van de winkel zal ontvangen.
We moeten alleen een object retourneren, dat twee eigenschappen zal hebben en, zoals we al zagen, het zijn decks en addingDeck eigenschappen. Dus ik kan ze hier gewoon kopiëren en plakken, omdat dit praktisch dezelfde gegevens zijn. We hoeven alleen de syntaxis te converteren naar de letterlijke syntaxis van het object in plaats van de syntaxis van JSX.
Dus dit is onze mapStateToProps functie. Kortom, het neemt gewoon de huidige status van de winkel, en het geeft alle gegevens of presentaties die nodig zijn. Dus het heeft de decks en de addingDeck eigendom, en dus keren we die binnen een object terug.
We kunnen een paar dingen doen om dit een beetje op te ruimen. Allereerst kunnen we deze accolades die de blokkering van deze functie vormen, eigenlijk kwijtraken, omdat we maar één verklaring hebben dat we terugkeren. Maar dan, omdat we slechts die ene regel hebben, kunnen we de retourverklaring kwijt.
Nu hebben we accolades rond het object letterlijk en JavaScript gaat denken dat dit een functieblok is, dus we zullen deze tussen haakjes plaatsen.
We kunnen dit een beetje meer verkorten, omdat we niet het hele staatsobject nodig hebben, dus we kunnen de destructurering syntaxis gebruiken en zeggen dat we gewoon de decks eigendom en de addingDeck eigendom van dit object.
Natuurlijk zeggen we niet binnen deze functie state.decks, we zeggen gewoon decks. En dat zeggen we niet state.addingDeck, we zeggen gewoon addingDeck. En nu denk ik dat je kunt zien waar we naartoe gaan - omdat de sleutel en het eigendom dezelfde naam hebben, kunnen we een van deze verwijderen en kunnen we gewoon zeggen decks en addingDeck.
En dit is de kortere versie van onze functie dankzij ES6.
Dus nu hoe zit het mapDispatchToProps? Welnu, dit is ook een functie en het zal gaan duren verzending als zijn enige parameter. Nu is verzending natuurlijk de verzendfunctie van de winkel.
Nogmaals, we gaan gewoon een object letterlijk retourneren, dus vergeet deze haakjes niet, en van binnen hebben we de drie eigenschappen nodig die we bovenaan hebben: addDeck, showAddDeck, en hideAddDeck. Dus nu hebben we een functie die de verzendfunctie toewijst aan de drie callbacks die we nodig hebben voor een zijbalk.
Dus nu hebben we alles wat we nodig hebben om onze containercomponent te maken. We hebben twee functies die ons statusobject in onze verzendfunctie in kaart brengen met de eigenschappen die deze functie nodig heeft. En we hebben een presentatiecomponent die deze eigenschappen verwacht.
Nu de aansluiten() functie is wat we kunnen gebruiken om deze twee mappingfuncties te verbinden met een presentatiecomponent. En wat deze verbindingsfunctie zal teruggeven, is onze containercomponent. We gaan hier eigenlijk geen andere component schrijven - in plaats daarvan geven we deze drie delen door aan de aansluiten() functie, en het gaat onze containercomponent retourneren.
Dus onderaan onderaan, in plaats van de zijbalk te exporteren, laten we een gesprek exporteren naar aansluiten(). We gaan er twee parameters doorgeven-de mapStateToProps en mapDispatchToProps -functies en aansluiten() zal een nieuwe functie retourneren.
export standaard connect (mapStateToProps, mapDispatchToProps) (zijbalk);
Wat feitelijk vanuit dit bestand wordt geëxporteerd, is geen presentatierubkader, maar het is onze nieuwe containercomponent, die we buiten deze functie nog steeds kunnen zien als
Dus dat is het reactie-redux pakket in actie. U kunt de bronbestanden van de cursus controleren op GitHub om te zien hoe de code volledig werkt.
In de volledige cursus, Modern Web Apps With React en Redux, laat ik je zien hoe je aan de slag kunt met het bouwen van moderne web-apps met React en Redux.
Uitgaande van niets, zult u deze twee bibliotheken gebruiken om een complete webtoepassing te bouwen. U begint met de eenvoudigst mogelijke architectuur en bouwt langzaam de app op, functie voor functie. Je leert over basisbegrippen zoals tooling, verloopstukken en routing. Je leert ook over enkele meer geavanceerde technieken, zoals slimme en domme componenten, pure componenten en asynchrone acties. Tegen het einde heb je een complete flashcards-app gemaakt om te leren door gespreide herhaling.
Onderweg krijg je de kans om je ES6 (ECMAScript 2015) vaardigheden aan te scherpen en de patronen en modules te leren die het beste werken met React en Redux!
Je kunt ook verder bouwen op je kennis van React met deze cursussen:
