Hvis du fremdeles ikke vet det hva er Redux, i denne artikkelen skal vi fokusere på å forklare alt du bør vite om dette biblioteket Javascript, så vel som dens bruk, hvordan den kan brukes osv. På denne måten vil du ha alle nødvendige verktøy for å kunne integrere det i dine neste JS-prosjekter.
La oss se hvordan Redux er!
Hva er JavaScript?
JavaScript (JS), er et tolket programmeringsspråk. Den regnes som en dialekt av ECMAScript-standarden og kjennetegnes ved å være objektorientert, prototypebasert, imperativ, svakt skrevet og dynamisk. Til tross for navnet, bør det ikke forveksles med Java. Opprettelsen er basert på kommersielle hensyn, etter oppkjøpet av Sun Microsystems (skaper av Java) av Netscape Navigator (skaper av LiveScript) og navneendringen av programmeringsspråket.
hovedsakelig brukes på klientsiden, som utgjør en integrert del av nettlesere. Dette lar deg forbedre brukergrensesnittet og lage dynamiske nettsider. I tillegg kan JavaScript brukes på serversiden, kjent som Server-side JavaScript eller SSJS. Dens anvendelighet strekker seg utover nettet, og finner bruk i PDF-dokumenter og skrivebordsapplikasjoner, hovedsakelig widgets, etc.
La JavaScript-syntaksen ligner den for språk som C++ og Java, selv om den adopterer navn og konvensjoner fra Java, derav navnet. Men, som jeg nevnte før, er det viktig å merke seg at til tross for deres lignende navn, har Java og JavaScript forskjellig semantikk og formål.
På den annen side må vi huske at JavaScript bruker en implementering av Document Object Model (DOM), og det JS er det eneste programmeringsspråket som nettlesere forstår innfødt. Opprinnelig ble det brukt i HTML-websider for operasjoner på klienten uten tilgang til serveren. Imidlertid er det i dag mye brukt til å sende og motta informasjon fra serveren, ofte i kombinasjon med teknologier som AJAX. JavaScript tolkes i brukeragenten mens setningene lastes ned sammen med HTML-koden.
JS-applikasjoner
JavaScript er et programmeringsspråk som er mye brukt i en rekke applikasjoner og sammenhenger, for eksempel:
- Webutvikling: Det er viktig i webutvikling. Den brukes til å forbedre interaktivitet og brukeropplevelse på nettsteder og nettapplikasjoner. Den brukes blant annet til å lage interaktive skjemaer, visuelle effekter, sanntidsdatavalideringer og dynamisk navigasjon. Tilstede i:
- Nettgrensesnitt: Det er hjørnesteinen i frontend-utvikling. Rammer og biblioteker som React, Angular og Vue.js er avhengige av JavaScript for å lage interaktive og dynamiske brukergrensesnitt i webapplikasjoner.
- Web-backend: Gjennom plattformer som Node.js brukes JavaScript på serversiden for å bygge komplette webapplikasjoner. Dette lar en utvikler bruke JavaScript på både front-end og back-end av en applikasjon, noe som gjør det enkelt å synkronisere data og bygge applikasjoner i sanntid.
- Serverapplikasjoner: Selv om det ikke er så vanlig som andre serversidespråk, brukes JavaScript i utvikling av serverapplikasjoner gjennom Node.js. Dette er spesielt nyttig for sanntidsapplikasjoner og applikasjoner som håndterer et stort antall samtidige forespørsler.
- Mobilapper: Den brukes i utviklingen av hybride mobilapplikasjoner ved bruk av rammeverk som React Native og Ionic. Disse rammene lar utviklere skrive én gang og kjøre applikasjonen på flere plattformer, for eksempel iOS og Android.
- Online spill: Det brukes i utviklingen av nettspill og nettleserspill. Biblioteker som Phaser og Three.js gjør det enkelt å lage interaktive 2D- og 3D-spill i nettleseren.
- Desktop-applikasjoner: Gjennom verktøy som Electron er det mulig å bygge skrivebordsapplikasjoner på tvers av plattformer ved å bruke webteknologier som HTML, CSS og JavaScript.
- Nettleserutvidelser: For å legge til ekstra funksjonalitet til nettlesere, brukes utvidelser. Disse utvidelsene er vanligvis skrevet i JavaScript.
- Internet of Things (IoT)-applikasjoner: Den brukes til å utvikle applikasjoner og systemer for IoT-enheter på grunn av dens evne til å kommunisere med maskinvare og sensorer gjennom APIer og spesialiserte biblioteker.
Hva er Redux og hvordan fungerer det?
Redux er et JavaScript-bibliotek med åpen kildekode som brukes til å administrere tilstand i applikasjoner, og påvirket av funksjonsspråket Elm. Det kombineres ofte med andre biblioteker som React eller Angular for å bygge brukergrensesnitt. Det ble unnfanget av Dan Abramov og Andrew Clark, som ble inspirert av Facebook-biblioteket kalt Flux.
Generelt sett er Redux et lite bibliotek med en Enkel og begrenset API, designet for å fungere som en forutsigbar beholder for applikasjonstilstand. Driften ligner på konseptet "reduser" i funksjonell programmering.
Historien til Redux går tilbake til 2015, da Dan Abramov begynte å utvikle den første versjonen av Redux mens de forbereder seg til å holde et foredrag på React Europe-konferansen om Hot Reloading. Under denne prosessen la Abramov merke til likheten mellom Flux-mønsteret og reduksjonsfunksjonen. Denne observasjonen fikk ham til å lure på om en Flux-butikk faktisk kunne være en reduksjonsfunksjon.
For å gjennomføre denne ideen tok Abramov kontakt med Andrew Clark, som var forfatteren av Flux-implementeringen kalt Flummox. Sammen samarbeidet de for å bringe Redux til live og definerte et sammenhengende API. I tillegg implementerte de muligheten til utvidelse ved hjelp av mellomvare og butikkforsterkere, som bidro betydelig til det nåværende Redux-økosystemet, og utvidet mulighetene ytterligere.
Redux og React-forhold: hva er React
React er et JavaScript-bibliotek som fokuserer på å lage brukergrensesnitt, selv om allsidigheten går utover den definisjonen. Dette verktøyet, opprinnelig utviklet av Facebook, er åpen kildekode og mye brukt på grunn av dets evne til raskt å lage brukergrensesnitt i en rekke applikasjoner, inkludert enkeltsides nettapplikasjoner (SPA) og Android-applikasjoner. og iOS.
I motsetning til andre rammeverk, for eksempel Angular, som tilbyr mer komplekse tilnærminger, er React skiller seg ut for sin evne til å generere brukergrensesnitt effektivt. Dette oppnås ved bruk av .jsx-filer, som kombinerer logikk og brukergrensesnitt i en enkelt fil og er organisert i enheter som kalles komponenter.
Virtual DOM: hva er det?
Når vi fordyper oss i ReactJS-verdenen, hører vi sannsynligvis ofte om konseptet Virtuell DOM. Denne ideen stammer fra en genial idé: i stedet for å oppdatere hele den faktiske DOM, modifiserer vi bare den delen som virkelig trenger endringer. I gamle JavaScript-applikasjoner pleide vi å motta data i JSON-format fra serveren og deretter generere en fullstendig ny HTML for å gjengi, noe som resulterte i en oppdatering av hele siden ved hver endring.
Hvordan installere og konfigurere Redux i prosjektet ditt
Hvis du vil vite hvordan installere ReduxSannheten er at det ikke er komplisert i det hele tatt. For å gjøre dette må du gå til terminalen og derfra må du utføre følgende kommando:
npm i -S redux
Nå har du den stabile versjonen av Redux installert på systemet ditt. Selvfølgelig må du sannsynligvis løse noen avhengigheter, for eksempel å ha npm, Node.js-pakkebehandleren, installert. Når dette er gjort, skal vi nå installere React, som du også trenger for å dra nytte av Redux, samt utviklingsverktøyene for å kunne begynne å lage prosjektene dine.
For å installere disse andre pakkene, er kommandoene du må utføre:
npm i -S react-redux npm i -D redux-devtools
Nå ville du ha alt klart til å starte. Hvis du går til hovedmappen eller katalogen der Redux har blitt installert, vil du se at det er flere underkataloger eller undermapper, som STORE, REDUCERS, ACTIONS, TYPES. Du må vite hva hver enkelt er:
- TILTAK: Dette er objekter som må ha to egenskaper, en som beskriver typen (TYPE) av handlingen og en annen som beskriver hva som bør endres i tilstanden til appen.
- REDUSERE– Redusere er funksjoner som implementerer handlingers atferd. De endrer tilstanden til appen, avhengig av beskrivelsen av handlingen og beskrivelsen av tilstandsendringen.
- OPPBEVARING: er stedet der handlinger og reduksjonsmidler møtes, vedlikeholder og endrer tilstanden til appen. Det er bare en.
- TYPER: som jeg sa før, det er typen handling.
Praktisk eksempel: Opprette en applikasjon med Redux
Un eksempel ved å bruke Redux Det kan være følgende, hvor en enkel regnskapsapp lages ved hjelp av Redux. Men for å gjøre dette, må du først konfigurere Redux og definere handlingene og reduseringene dine:
// Importer Redux-biblioteker importerer { createStore } fra 'redux'; // Definer handlingene const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Definer redusering const counterReducer = (tilstand = 0, handling) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': returnere tilstand - 1; standard: returtilstand; } }; // Opprett Redux-butikken const store = createStore(counterReducer); // Abonner på endringer i butikken store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Send handlinger for å endre tilstand store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Dette er et veldig enkelt eksempel på hvordan du bruker Redux. I en større app vil du definere mer komplekse handlinger og reduseringer og koble til React-komponenter for å få tilgang til og oppdatere statusen til butikken. Men dette gir deg i det minste en ide om hvordan det fungerer...