Redux och React krokar ska inte ses som motsatsen till varandra. Det är olika saker, med distinkta mål.
När React Hooks föddes, flera utvecklare verkade förvirrade av de koncept som introducerades och hur de kommer att interpolera i Redux bibliotek. Den Användareduker hook ökade denna förvirring.
I den här artikeln kommer jag att förklara hur Redux och den nya React Hook Användareduker De är olika och hur de kan användas.
Redux skapades för att hantera tillstånd över hela applikationen. Det ger flera verktyg för att minska komplexiteten i hanteringen av det globala applikationsläget.
De nya tillskotten till Reagera bibliotek, AnvändningContext och Användareduker, kom också att hantera tillståndet för en Reagera ansökan. Det har dock en subtil skillnad från Redux, som jag kommer att klargöra ytterligare nedan.
Men först, låt mig presentera dig för React Hooks.
React Hooks är det nya sättet att hantera tillstånd och livscykel i React-komponenter, utan att förlita sig på komponentklasser. Det introducerades i 16.8-versionen av biblioteket och har för avsikt att minska komponenternas komplexitet genom att dela logik mellan dem.
React Hooks ger ett enkelt sätt att hantera komponent uppförande och dela komponent logik.
Den React Hooks funktionen har inte för avsikt att ersätta tidigare kunskaper om Reagera begrepp som livscykel, stat, rekvisita, sammanhang, och referenser.
Med React Hooks, vi kan skriva våra anpassade krokar för att extrahera logik som kommer att användas i mer än en komponent och implementera D.R.Y (Upprepa inte dig själv) mönster.
I utdraget nedan kan du se ett exempel på anpassade krokar skrivna för ett av våra projekt:
Okej, nu när vi vet React Hooks, låt oss ta en titt på Redux.
Redux är ett bibliotek för hantering av det globala applikationsläget. I det här biblioteket kan vi hitta flera verktyg som hjälper oss, utvecklare, att vara i kontakt med applikationens tillstånd och också omvandla det genom att ge användaren möjlighet att avge åtgärder.
Redux, som dokumentationen säger, kan beskrivas i tre grundläggande principer:
butik.store is by emitting actions.store, the reducer should be written as a pure function.Redux even updated the library with its custom hooks. These can be used to integrate the components that use the React Hooks features to access data from the store and dispatch actions without relying on the components classes.
Now that we are a little more familiar with Redux and React Hooks let's see the difference between them.
Both of them handle state management, but with several differences. There is a lot of abstraction into the following sentence, but this seems like a golden rule to know when you should use Redux into your application:
Redux should be used in applications that have several features. With these features sharing chunks of the same information.
While using the useContext and useReducer, the Redux functionalities can be reproduced. Redux offers some free tools that help us to manage the application without reinventing the wheel. It also offers us the following:
connect() function.
Let's understand a little more about the actual React addictions, React Hooks, to manage the global state and its ideal use.
The useContext hook comes to access the state that is shared by the providers. The best-case scenario to use the React Hooks useContext is in a small application or to share small pieces of information across the components, like the theme of the application. The useContext has two principal concepts, and they are listed below.
This provider creates the theme object that will be used in all applications and one function to update it, the setTheme. In the snippet below, you can check the setTheme in action.
In the snippet above, we can check the use of the global object theme to set the background color of our application.
After getting to know the useContext function, there is one more that confuses the developers. The useReducer hooks. In the section below, I will be walking through this functionality and explain its use case.
Den Användareduker krok bör användas i komponenter som har komplex logik bakom sig. Det visar sig som den största förvirringen med Redux bibliotek, eftersom utvecklare tenderar att tro det Användareduker kan ersätta statsförvaltarbiblioteket. Men i själva verket bör dess användning begränsas till komponenter. Detta beror främst på att den globala användningen av Användareduker kräver omskrivningar av ny kod till funktioner som kontroll av komponentuppdatering.
Nu när vi förstår användningsfallet för Användareduker hook är dags att visa lite action. I exemplet nedan använder vi den nya React Hook missbruk Användareduker för att styra en komponent med olika tillstånd.
Låt oss ta en djup titt på Användareduker ingångs- och utgångsparametrar.
Förklaringen av Användareduker kroken kommer troligen att se ut så här:const [tillstånd, sändning] = userEducer (reducerare, INITIAL_STATE);
Där vi kan identifiera att Användareduker kroken tar emot två parametrar, som visas nedan:
Den första utgångsparametern för kroken är det faktiska komponenttillståndet. Detta tillstånd bör användas i vår applikation för att representera uppgifterna.
Det följer också samma regel för Reagera stat, det vill säga:
Skriv aldrig direkt till staten och staten bör uppdateras genom att emittera åtgärder.
Den åtgärder det kommer att vara skickad av våra komponenter bör alltid representeras som ett objekt med skriva och nyttolast nyckel. Var skriva står som identifierare för skickad Åtgärden och nyttolast är den information som detta verkan kommer att lägga till staten.
Genom att lägga till alla dessa bitar tillsammans kan vi se slutresultatet i applikationen nedan:
Redux och React Hooks bör ses som komplement och också som olika saker. Medan med den nya React Hooks tillägg, AnvändningContext och Användareduker, du kan hantera det globala tillståndet, i projekt med större komplexitet du kan lita på Redux för att hjälpa dig att hantera applikationsdata.
Om du funderar på bygga en applikation, båda kan användas. Medan Redux innehåller det globala tillståndet och de åtgärder som kan skickas, React Hooks funktioner för att hantera det lokala komponenttillståndet.
Javascript-utvecklare sedan 2016 har jag byggt mobilappar med Ionic och React Native. Gitarrspelare och matlagningsälskare.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
