Hvis du stadig ikke ved det hvad er Redux, i denne artikel vil vi fokusere på at forklare alt, hvad du bør vide om dette bibliotek af JavaScript, samt dets anvendelser, hvordan det kan bruges mv. På denne måde vil du have alle de nødvendige værktøjer til at kunne integrere det i dine næste JS-projekter.
Lad os se, hvordan Redux er!
Hvad er JavaScript?
JavaScript (JS), er et fortolket programmeringssprog. Det betragtes som en dialekt af ECMAScript-standarden og er karakteriseret ved at være objektorienteret, prototypebaseret, imperativ, svagt skrevet og dynamisk. På trods af navnet bør det ikke forveksles med Java. Dets oprettelse er baseret på kommercielle overvejelser, efter købet af Sun Microsystems (skaber af Java) af Netscape Navigator (skaber af LiveScript) og navneændringen af programmeringssproget.
hovedsageligt bruges på klientsiden, der udgør en integreret del af webbrowsere. Dette giver dig mulighed for at forbedre brugergrænsefladen og skabe dynamiske websider. Derudover kan JavaScript bruges på serversiden, kendt som Server-side JavaScript eller SSJS. Dens anvendelighed strækker sig ud over internettet og finder anvendelse i PDF-dokumenter og desktopapplikationer, hovedsageligt widgets osv.
La JavaScript-syntaksen ligner den for sprog som C++ og Java, selvom det adopterer navne og konventioner fra Java, deraf navnet. Men, som jeg nævnte før, er det vigtigt at bemærke, at på trods af deres lignende navn, har Java og JavaScript forskellige semantikker og formål.
På den anden side skal vi huske, at JavaScript bruger en implementering af Document Object Model (DOM), og det JS er det eneste programmeringssprog, som browsere forstår indbygget. Oprindeligt blev det brugt i HTML-websider til operationer på klienten uden adgang til serveren. Men i dag er det meget brugt til at sende og modtage information fra serveren, ofte i kombination med teknologier som AJAX. JavaScript fortolkes i brugeragenten, mens sætningerne downloades sammen med HTML-koden.
JS applikationer
JavaScript er et programmeringssprog, der er meget udbredt i en række forskellige applikationer og sammenhænge, såsom:
- Web-udvikling: Det er vigtigt i webudvikling. Det bruges til at forbedre interaktivitet og brugeroplevelse på websteder og webapplikationer. Det bruges blandt andet til at skabe interaktive formularer, visuelle effekter, realtidsdatavalideringer og dynamisk navigation. Til stede i:
- Web front-end: Det er hjørnestenen i frontend-udvikling. Rammer og biblioteker som React, Angular og Vue.js er afhængige af JavaScript til at skabe interaktive og dynamiske brugergrænseflader i webapplikationer.
- Web backend: Gennem platforme som Node.js bruges JavaScript på serversiden til at bygge komplette webapplikationer. Dette giver en udvikler mulighed for at bruge JavaScript på både front-end og back-end af en applikation, hvilket gør det nemt at synkronisere data og bygge applikationer i realtid.
- Serverapplikationer: Selvom det ikke er så almindeligt som andre sprog på serversiden, bruges JavaScript til udvikling af serverapplikationer gennem Node.js. Dette er især nyttigt for realtidsapplikationer og applikationer, der håndterer et stort antal samtidige anmodninger.
- Mobilapps: Det bruges i udviklingen af hybride mobilapplikationer ved hjælp af rammer som React Native og Ionic. Disse rammer giver udviklere mulighed for at skrive én gang og køre applikationen på flere platforme, såsom iOS og Android.
- Online spil: Det bruges i udviklingen af onlinespil og browserspil. Biblioteker som Phaser og Three.js gør det nemt at skabe interaktive 2D- og 3D-spil i browseren.
- Desktop applikationer: Gennem værktøjer som Electron er det muligt at bygge desktop-applikationer på tværs af platforme ved hjælp af webteknologier som HTML, CSS og JavaScript.
- Browserudvidelser: For at tilføje yderligere funktionalitet til webbrowsere bruges udvidelser. Disse udvidelser er normalt skrevet i JavaScript.
- Internet of Things (IoT) applikationer: Det bruges til at udvikle applikationer og systemer til IoT-enheder på grund af dets evne til at kommunikere med hardware og sensorer gennem API'er og specialiserede biblioteker.
Hvad er Redux, og hvordan virker det?
Redux er et open source JavaScript-bibliotek som bruges til at styre tilstand i applikationer og påvirket af Elm funktionssproget. Det kombineres ofte med andre biblioteker såsom React eller Angular for at bygge brugergrænseflader. Det blev udtænkt af Dan Abramov og Andrew Clark, som var inspireret af Facebook-biblioteket kaldet Flux.
Generelt set er Redux et lille bibliotek med en Enkel og begrænset API, designet til at fungere som en forudsigelig beholder for anvendelsestilstand. Dens funktion ligner konceptet "reducere" i funktionel programmering.
Redux's historie går tilbage til 2015, hvor Dan Abramov begyndte at udvikle den første version af Redux mens de forbereder sig på at holde et foredrag på React Europe-konferencen om Hot Reloading. Under denne proces bemærkede Abramov ligheden mellem fluxmønsteret og reduceringsfunktionen. Denne observation fik ham til at spekulere på, om en Flux-butik faktisk kunne være en reduktionsfunktion.
For at udføre denne idé kontaktede Abramov Andrew Clark, som var forfatteren til Flux-implementeringen kaldet Flummox. Sammen samarbejdede de om at bringe Redux til live og definerede en sammenhængende API. Derudover implementerede de evnen til udvidelse ved hjælp af middleware og butiksforstærkere, som bidrog væsentligt til det nuværende Redux-økosystem, hvilket yderligere udvidede dets muligheder.
Redux og React-forhold: hvad er React
React er et JavaScript-bibliotek som fokuserer på at skabe brugergrænseflader, selvom dens alsidighed rækker ud over denne definition. Dette værktøj, som oprindeligt blev udviklet af Facebook, er open source og meget brugt på grund af dets evne til hurtigt at skabe brugergrænseflader i en række forskellige applikationer, herunder enkeltsides webapplikationer (SPA) og Android applikationer. og iOS.
I modsætning til andre rammer, såsom Angular, der tilbyder mere komplekse tilgange, er React skiller sig ud for sin evne til at generere brugergrænseflader effektivt. Dette opnås ved at bruge .jsx-filer, som kombinerer logik og brugergrænseflade i en enkelt fil og er organiseret i enheder kaldet komponenter.
Virtual DOM: hvad er det?
Når vi dykker ned i ReactJS-verdenen, hører vi sikkert ofte om konceptet Virtuel DOM. Denne idé stammer fra en genial forestilling: i stedet for at opdatere hele den faktiske DOM, ændrer vi kun den del, der virkelig har brug for ændringer. I gamle JavaScript-applikationer plejede vi at modtage data i JSON-format fra serveren og derefter generere en komplet ny HTML til gengivelse, hvilket resulterede i en opdatering af hele siden ved hver ændring.
Sådan installeres og konfigureres Redux i dit projekt
Hvis du vil vide det hvordan man installerer ReduxSandheden er, at det overhovedet ikke er kompliceret. For at gøre dette skal du gå til terminalen og derfra skal du udføre følgende kommando:
npm i -S redux
Nu har du den stabile version af Redux installeret på dit system. Selvfølgelig skal du sandsynligvis løse nogle afhængigheder, såsom at have npm, Node.js-pakkehåndteringen, installeret. Når dette er gjort, skal vi nu til at installere React, som du også skal bruge for at udnytte Redux, samt udviklingsværktøjerne for at kunne begynde at skabe dine projekter.
For at installere disse andre pakker er kommandoerne, du skal udføre:
npm i -S react-redux npm i -D redux-devtools
Nu ville du have alt klar til at starte. Hvis du går til hovedmappen eller mappen, hvor Redux er blevet installeret, vil du se, at der er flere undermapper eller undermapper, såsom STORE, REDUCERS, ACTIONS, TYPES. Du skal vide, hvad hver enkelt er:
- TILTAG: Det er objekter, der skal have to egenskaber, en der beskriver typen (TYPE) af handlingen og en anden der beskriver hvad der skal ændres i appens tilstand.
- REDUCERE- Reducere er funktioner, der implementerer handlingernes adfærd. De ændrer appens tilstand, afhængigt af beskrivelsen af handlingen og beskrivelsen af tilstandsændringen.
- OPBEVARING: er stedet, hvor handlinger og reduktionsmidler mødes, vedligeholder og ændrer appens tilstand. Der er kun én.
- TYPER: som jeg sagde før, det er den type handling.
Praktisk eksempel: Oprettelse af en applikation med Redux
Un eksempel ved hjælp af Redux Det kunne være følgende, hvor der laves en simpel regnskabsapp ved hjælp af Redux. Men for at gøre dette skal du først konfigurere Redux og definere dine handlinger og reducerere:
// Importer Redux-biblioteker importerer { createStore } fra 'redux'; // Definer handlingerne const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Definer reduceringen const counterReducer = (tilstand = 0, handling) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': returnere tilstand - 1; standard: returtilstand; } }; // Opret Redux-butikken const store = createStore(counterReducer); // Abonner på ændringer i butikken store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Send handlinger for at ændre tilstand store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Dette er et meget simpelt eksempel på, hvordan du bruger Redux. I en større app ville du definere mere komplekse handlinger og reducerere og forbinde React-komponenter for at få adgang til og opdatere butikkens tilstand. Men dette giver dig i det mindste en ide om, hvordan det virker...