En annan Reagera-Redux guide

en Annan Reagera-Redux guide

jag personligen hade en svår tid att försöka att förstå idén om varför jag behövde Redux och hur det exakt skulle gynna min Reagera projektet tillbaka i mitt webbutveckling bootcamp. Jag gick igenom en hel del förklaringar i min kurs, men i slutet av dagen, jag var fortfarande förvirrad om hur använda Redux.

När jag äntligen fick poängen med att använda Reagera och Redux, har jag beslutat mig för att dela min kunskap och som förhoppningsvis kommer att göra det lättare för dig att gå igenom detta material.

Första försök att inte tänka på det sätt att Reagera och Redux på något sätt är relaterade. De är helt separata.

Föreställa mig att Reagera som en del av en visa-lager och Redux som en del av en data lager. Jag vet att det inte är så enkelt direkt för att få uppfattning om vad som är en data lager och vad som är en visa-lager. På bilden nedan kommer jag att visa och ge en förklaring om båda.

Så diagrammet ovan visar helt enkelt i allmänhet två olika bitar Reagera (visa), Redux (data), Reagera/Redux (App) som kommer att anslutas på någon punkt.

Låt oss gå in Redux i mer information.

Redux skulle vara staten som innehar data av vår app. Container, det är i grunden en komponent som är ansluten till redux. Med hjälp av redux staten inuti reagera komponent uppgradera denna komponent i en container.

i grund och botten, du kan tänka Redux som en samling av alla centralisera data av vår app, som hänvisar till som ett tillstånd.

Reagera skulle vara något som visas på skärmen och användaren kommer i kontakt med.

I diagrammet ovan App kommer att vara den uppfyller punkt Reagera och Redux.

När jag tänker på Redux det börjar med en djup förståelse av vad som Reducer är och hur exakt jag kan manipulera med mina uppgifter.

Reducer är en funktion som returnerar en bit av ansökan staten.

först blev jag förvirrad försöker att få uppfattning om var exakt min staten går när man får tillbaka.

Så här ska jag försöka ge min egen väg när det gäller hur data flödar mellan olika delar insidan av ansökan, för att förklara hur det börjar inne i reduceraren och går vidare.

Diagram som visar flödet av data.

Nedan kan du se vad som i grund och botten händer inuti reducering. Jag har uppgifter om hundar. Som du kan se i det hela är vad som kallas för ansökan om tillstånd. Inne i detta tillstånd jag har 2 reduceringar.

Hundar, selectedDog kommer att vara nyckeln för varje reducering. Information om ras kommer att vara det värde som vi tilldelar vår nyckel.

för Att flytta framåt, låt oss titta på den enkla reducering. I grund och botten, en funktion som returnerar data om vår hund raser. För att se hur flödet av uppgifter från våra reducering till andra delar av våra program som komponenter, åtgärder och så vidare, vi har till tråd det upp. För detta ändamål, allt jag behöver är att exportera våra reducering. På detta sätt kan jag gå vidare och importera den någon annanstans inne ansökan.

I diagrammet nedan kan du se hur man kan föra i min reducer i combineReducers fil som heter index.js som lokaliserar inne allmänt förminskningsapparater-mappen. Så i vårt exempel skulle jag ha en mapp (förminskningsapparater) som innehåller index.js fil (combineReducers) och reduktion (reducer_dogs.js). Ditt mål nu är att fokusera hur gör jag för att ta in min reducer i combineReducers fil.

Så i detta fall vår ansökan har en enda bit av tillstånd som kallas hundar och returnerar värdet av vad vi har i våra DogsReducer funktion.

om du Nu minns vi kommer att flytta framåt till nästa del från den allmänna bilden ovan som är den komponent. Så i grund och botten, i syfte att skapa vår del kommer att vara att göra vad vi har inne av våra reducering.

Låt oss börja utforska diagrammet ovan.

för det Första, jag kommer att främja vår del att behållaren. Behållaren har direkt tillgång till vår stat, som produceras av Redux. Bara en påminnelse, vår staten sitter på insidan av reducer (lista över raser). Anslutningen mellan behållaren och vår stat vi kommer att göra med “att reagera-redux” bibliotek. Du kan se på toppen importerar vi ansluter från ‘reagerar-redux”. Kom ihåg att målet är att få våra tillstånd (lista över raser) för att visa upp insidan av våra behållare.

Så, inne i våra behållare ska jag skapa en lista över våra raser, den leverantören här: här.rekvisita.hundar som i huvudsak kommer från vår stat. För detta använder vi {detta.renderList()}. Så rätt ovan att jag måste definiera en ny funktion som kallas renderList. Insidan av denna funktion kommer vi att koppla upp vår lista över raser från reducering. Vi har en mängd olika raser, så vad vi ska göra är att karta över varje element (ras) i denna matris och returnerar den som en hund ras.

Så här kommer vi till det intressanta delen som kallas mapStateToProps. Så, tänk dig att när du har en reducering insidan av staten, i vårt exempel är det en lista över raser och du försöker att koppla denna lista upp insidan av behållaren, du har för att föra förteckningen över till container, endast på detta sätt container kommer att vara medveten om något som sitter i reduceraren. mapStateToProps är den här killen som ger våra reducering data från stat till behållaren.

Connect(mapStateToProps)(DogList) är i grunden ett sätt för att sätta ihop reducer och komponent. Så det är viktigt att förstå vad som får returneras av mapStateToProps funktion är i grunden vad vi kommer att ha i vår.rekvisita insidan av renderList funktion.

I vår app.js allt vi behöver göra är att importera våra DogList container för att göra det.

We will be happy to hear your thoughts

Leave a reply