En av de viktigaste delarna av någon app är statlig förvaltning. Det dikterar vad användarna ser, hur appen ser ut, vilka data som sparas och så vidare. Därför är det ingen överraskning att det finns så många verktyg med öppen källkod som är dedikerade till att göra statshantering enklare och mer användarvänlig.
Av de många JavaScript UI-ramverk, React är kanske den som åtnjuter det mest dynamiska ekosystemet, inklusive statshanteringsbibliotek. Den här artikeln kommer att täcka två av dessa bibliotek - Rekyl vs Redux - och visa hur de båda skiljer sig från varandra, och deras olika förhållningssätt till applikationsutveckling.
Medan Redux anses vara den mest populära statsförvaltningsbibliotek, Recoil är Facebooks experiment React State Management Framework som nyligen har fått mycket uppmärksamhet. Låt oss ta en titt på vad Recoil vs Redux är, deras prestanda, och om det är en bra idé att använda den ena över den andra.
EN tillståndshanteringsbibliotek ger dig ett bekvämt sätt att modellera tillståndet för din applikation, härleda beräknade värden från det och övervaka det för ändringar.
Enkelt uttryckt är hantering av dina data i frontend-ramverk lika viktigt som databaser. Att ha ett statligt ledningssystem som hanterar dina data väl, hjälper dig att undvika ett antal API-anrop.
Utan statlig förvaltning sprids data överallt, som du kan se på bilden nedan. Du kan faktiskt inte ha en enda källa till sanning för dina data eftersom den här typen av struktur är svår att underhålla och saktar ner din utvecklingsprocess.
När du har en Statligt förvaltningssystem på plats, data flödar i en riktning, från din app till staten och vice versa. Du är medveten om den faktiska platsen för dina data. Dessa tillståndshanteringstekniker ger också en ögonblicksbild av hela datamängden vid ett visst ögonblick i tiden. På så sätt vet du exakt var dina data är, vilka påskyndar utvecklingen.
Sammantaget gör hantering av dina data väl din applikation effektivare.
Rekyl js är ett nytt statshanteringsbibliotek för React. Det är ”minimalt och reaktiskt” som webbplatsen säger och, i praktiken, det ser mycket ut som att använda krokarna för normal användning men med ett par trevligare små detaljer som gör det lättare att förstå hur data flyter genom din applikation.
Redux är ett bibliotek med öppen källkod i JavaScript-världen, och mycket populärt inom domänen för React och React Native. Det är ett slags obligatoriskt verktyg för alla React-utvecklare, därför går förståelsen av begreppen React och Redux hand i hand.
Det implementerar också Flux, den föreslagna ”arkitekturen” för att hantera tillstånd på en React-applikation.
Redux tillhandahåller en centraliserad butik för ditt applikationstillstånd och logik. Det ger komponenter direkt åtkomst till de data de behöver, och är en förutsägbar tillståndsbehållare utformad för att hjälpa dig att skriva JavaScript-appar som beter sig konsekvent över klient-server och inbyggda miljöer.
Redux gör det möjligt för dig att göra det enklare att bygga komplexa applikationer genom att tillhandahålla enhetlighet i data i hela applikationen. När applikationen växer blir det utmanande att hantera data med komponenttillståndet.
Men för att kunna använda Redux behöver du inte skapa en React-app - du kan använda Redux med alla UI-ramverk eller bibliotek för hantering av appstatus. Redux har ett stort ekosystem av tillägg som passar dina behov.
Dessutom kan du spåra när, var, varför och hur programtillståndet ändras genom att använda Redux Devtools.
Redux har varit det valda biblioteket under lång tid, men med lanseringen av Rekyl, vi har nu också ett React-specifikt bibliotek som enkelt smälter samman med Reacts senaste funktioner.
Låt oss ta en titt vad när är det vettigt att använda Recoil och Redux, deras tillståndsmetoder, prestanda, API-skillnader och både utvecklare och användarupplevelse.
Till skillnad från Recoil använder Redux många fler termer:
åtgärder - det skickar ett meddelande till Redux och kan innehålla data; en åtgärd är en händelse som definierar något som hände i applikationen; den har en skriva fält på ett JavaScript-objekt.
reducerstycken - en händelseavlyssnare som hanterar händelser baserat på den mottagna åtgärden; tar emot den aktuella stat och en verkanobjekt; det kan uppdatera tillståndet om det behövs ((stat, åtgärd) => (Nystat)).
butik - det är där Redux applikationstillstånd bor; viss planering krävs för att ”designa” butiken för att säkerställa att uppdateringar utförs på den minsta uppsättningen data, eftersom uppdateringar till butiken kommer att utlösa uppdateringar i användargränssnittet.
Ett ganska vanligt scenario är att oavsiktligt skicka en uppdatering till butiken med en uppsättning värden, där endast ett av värdena skiljer sig från de som finns i butiken. De kommer att beställa komponenter att återge för alla mottagna, men bara ett värde uppdaterades verkligen. Ändå spenderar vi datorresurser för att berätta för komponenter att uppdatera vilket inte var nödvändigt på grund av den dåliga utformningen av butiken/reduceraren/åtgärden.
avsändande - låter dig uppdatera staten genom att ringa butik.försändelse (); det skickar åtgärder, dvs de utlöser en händelse.
selektorer- extraherar specifika bitar av information från en butik; det undviker att upprepa logik.
Låt oss ta en titt på exemplet nedan:
Bara definitioner för att kartlägga åtgärder med reducerarens operationer.
constants.js
Definierar hur appens tillstånd ändras beroende på mottagna åtgärder. Det här exemplet har två skivor, en för Användardata och en till för Varukorg. Åtgärden för framgångsrik inloggning registrerar användarens data i staten. Vid lyckad utloggning rensar vi användarens data och kundvagn.
reducers.js
Definition av de åtgärder som kommer att utlösa tillståndsförändringar. De kan få en nyttolast för att introducera nya data i staten. Vi har en åtgärd som ska anropas efter en lyckad inloggning och en annan för framgångsrik utloggning.
actions.js
selectors.js
Har bara några få begrepp som är enkla:
atom - en bit tillstånd; varje atom är som en mini-butik på sig själv och det blir svårare att falla in i det tidigare scenariot av Redux eftersom atomer är helt frikopplade och syftar till att hålla data som kommer att uppdateras på en gång.
väljare - basen där en bit av staten beräknas.
Exempel nedan:
state.js
component.js
createSlice () tillsammans KonfigureraÅterställ (), som kommer med åtgärder och reducerare;Används Dispatch och Använd Väljare krokar för att skicka åtgärder och använda väljare.
atom (), som också levereras med en väljare och sändbara åtgärder inbyggda.
Redux är bra på genomdriva bästa praxis för utvecklare, ger dig ett enkelt mönster att följa så att du inte behöver fatta för många implementeringsbeslut när du bygger ut funktioner. Det låter dig också abstrahera dina API-förfrågningar till åtgärder så allt hålls på ett enda ställe.
Recoil har sagts vara ganska lätt att använda. Det låter dig, till exempel, göra asynkrona förfrågningar i väljare för att komma igång med tillståndet från en API-begäran.
Om du vill hantera laddnings- och feltillstånd kan du behöva anpassad implementering. Det är bra att hålla reda på en global Laddar variabel i reduceraren.
Eftersom Recoil integreras med Reacts senaste läge gör det möjligt för dig att hantera laddningstillstånd med Spänning och fel med en ErrorBoundary, så att du kan bygga din applikation på ett mer deklarativt sätt.
state.js
component.js
Redux har etablerats som Ledare inom global statsledning ett tag, och det kommer verkligen inte att gå någonstans snart. i alla fall, Recoil håller på att bli en seriös utmanare för att blanda in med React.
En stor fördel för att använda Recoil är dess Integration med Reacts Suspense, vilket möjliggör ett enkelt sätt att hantera asynkrona uppgifter och upptäcka deras tillstånd, vilket gör att du kan snabbt ställa in laddningsskärmar utan att kräva så mycket logikkod för att kontrollera att programmet laddar data från servern.
Även om Redux är det bästa alternativet för större projekt och det bästa för en produktionsapplikationDet är rättvist att säga att Recoil kan vara ett bättre val när det gäller både utvecklarupplevelse och användarupplevelse. Recoil är fortfarande i ett experimentellt skede, men det kan ge prestandafördelar om din app är tillräckligt komplex.
Mer än 500.000 människor läser vår blogg varje år och vi rankas högst upp på Google för ämnen som React, Recoil och Redux. Om du gillade det här blogginlägget och skulle älska att läsa alla våra blogginlägg, ta en titt här.
Läs också:
Mångsidig och datadriven tillväxtmarknadsförare med fördjupad affärskunskap, uppdaterad med den senaste utvecklingen inom det digitala marknadsföringslandskapet.
Din dagliga webbutvecklare som gillar att gömma sig i backend. Javascript och Ruby är min sylt. Jag fumlar fortfarande med Docker och mina byggnader går sönder ganska ofta.
Full-stack utvecklare och JavaScript-älskare. Top notch front-end är min grej där jag gillar att experimentera med nya saker. Kajakfiskare, bryggare och öldrickare!
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)
