Mikä Redux on: kaikki mitä sinun tulee tietää tästä kirjastosta

Jos et vieläkään tiedä mikä on Redux, tässä artikkelissa keskitymme selittämään kaiken, mitä sinun pitäisi tietää tästä kirjastosta JavaScript, sekä sen käyttötarkoitukset, kuinka sitä voidaan käyttää jne. Tällä tavalla sinulla on kaikki tarvittavat työkalut, jotta voit integroida sen seuraaviin JS-projekteihisi.

Katsotaan millainen Redux on!

Mikä on JavaScript?

JavaScript (JS), on tulkittu ohjelmointikieli. Sitä pidetään ECMAScript-standardin murteena, ja sille on ominaista oliosuuntautunut, prototyyppipohjainen, pakottava, heikosti kirjoitettu ja dynaaminen. Nimestään huolimatta sitä ei pidä sekoittaa Javaan. Sen luominen perustuu kaupallisiin näkökohtiin, kun Netscape Navigator (LiveScriptin luoja) osti Sun Microsystemsin (Javan luoja) ja ohjelmointikielen nimen muuttui.

pääasiallisesti käytetään asiakaspuolella, jotka ovat olennainen osa verkkoselaimia. Näin voit parantaa käyttöliittymää ja luoda dynaamisia verkkosivuja. Lisäksi JavaScriptiä voidaan käyttää palvelinpuolella, joka tunnetaan nimellä Server-side JavaScript tai SSJS. Sen sovellettavuus ulottuu verkon ulkopuolelle, ja se löytää käyttöä PDF-dokumenteissa ja työpöytäsovelluksissa, pääasiassa widgeteissä jne.

Vuodesta 2012 lähtien kaikki nykyaikaiset selaimet tarjoavat täyden tuen ECMAScript 5.1:lle, JavaScript-versiolle. Ja tietysti nykyiset verkkoselaimet ovat täysin yhteensopivia JS:n kanssa, mikä mahdollistaa tämän tyyppisen koodin aktivoimisen tai deaktivoinnin tarvittaessa, olipa kyse sitten turvallisuudesta, joidenkin sivustojen tekstinkopiointisuojausten poistamiseksi käytöstä jne.

La JavaScript-syntaksi muistuttaa kielten, kuten C++ ja Java, syntaksia, vaikka se ottaa nimet ja käytännöt Javasta, tästä johtuu sen nimi. Mutta kuten aiemmin mainitsin, on tärkeää huomata, että samanlaisesta nimestään huolimatta Javalla ja JavaScriptillä on eri semantiikka ja tarkoitukset.

Toisaalta meidän on muistettava, että JavaScript käyttää Document Object Model (DOM) -toteutusta ja että JS on ainoa ohjelmointikieli, jota selaimet ymmärtävät natiivisti. Aluksi sitä käytettiin HTML-verkkosivuilla asiakkaan toimintoihin ilman pääsyä palvelimeen. Nykyään sitä käytetään kuitenkin laajalti tietojen lähettämiseen ja vastaanottamiseen palvelimelta, usein yhdistettynä tekniikoihin, kuten AJAX. JavaScript tulkitaan käyttäjäagentissa, kun lausekkeet ladataan yhdessä HTML-koodin kanssa.

JS-sovellukset

JavaScript on ohjelmointikieli, jota käytetään laajasti erilaisissa sovelluksissa ja yhteyksissä, kuten:

Verkkokehitys: Se on välttämätöntä verkkokehityksessä. Sitä käytetään parantamaan vuorovaikutteisuutta ja käyttökokemusta verkkosivustoilla ja verkkosovelluksissa. Sitä käytetään muun muassa interaktiivisten lomakkeiden, visuaalisten tehosteiden, reaaliaikaisten tietojen validointien ja dynaamisen navigoinnin luomiseen. Esittelyssä:
- Verkkokäyttöliittymä: Se on etupään kehityksen kulmakivi. Kehykset ja kirjastot, kuten React, Angular ja Vue.js, luovat JavaScriptiin interaktiivisia ja dynaamisia käyttöliittymiä verkkosovelluksiin.
- Web-tausta: Node.js:n kaltaisten alustojen kautta JavaScriptiä käytetään palvelinpuolella kokonaisten verkkosovellusten rakentamiseen. Näin kehittäjä voi käyttää JavaScriptiä sekä sovelluksen etu- että takapäässä, mikä tekee tietojen synkronoinnista ja sovellusten rakentamisesta helppoa reaaliajassa.
- Palvelinsovellukset: Vaikka JavaScript ei ole yhtä yleinen kuin muut palvelinpuolen kielet, sitä käytetään palvelinsovelluskehityksessä Node.js:n kautta. Tämä on erityisen hyödyllistä reaaliaikaisissa sovelluksissa ja sovelluksissa, jotka käsittelevät suurta määrää samanaikaisia pyyntöjä.
Mobiilisovellukset: Sitä käytetään hybridimobiilisovellusten kehittämisessä käyttämällä kehyksiä, kuten React Native ja Ionic. Näiden kehysten avulla kehittäjät voivat kirjoittaa kerran ja suorittaa sovelluksen useilla alustoilla, kuten iOS ja Android.
Nettipelit: Sitä käytetään verkkopelien ja selainpelien kehittämisessä. Kirjastot, kuten Phaser ja Three.js, tekevät vuorovaikutteisten 2D- ja 3D-pelien luomisesta helppoa selaimessa.
Työpöytäsovellukset: Electronin kaltaisten työkalujen avulla on mahdollista rakentaa monialustaisia työpöytäsovelluksia käyttämällä verkkoteknologioita, kuten HTML, CSS ja JavaScript.
Selainlaajennukset: Lisätoimintojen lisäämiseksi verkkoselaimiin käytetään laajennuksia. Nämä laajennukset on yleensä kirjoitettu JavaScriptillä.
Internet of Things (IoT) -sovellukset: Sitä käytetään sovellusten ja järjestelmien kehittämiseen IoT-laitteille, koska se pystyy kommunikoimaan laitteistojen ja antureiden kanssa API:iden ja erikoiskirjastojen kautta.

Mikä Redux on ja miten se toimii?

Redux on avoimen lähdekoodin JavaScript-kirjasto jota käytetään hallitsemaan tilaa sovelluksissa, ja siihen vaikuttaa Elm-toiminnallinen kieli. Se yhdistetään usein muihin kirjastoihin, kuten React- tai Angular-kirjastoihin käyttöliittymien rakentamiseksi. Sen suunnittelivat Dan Abramov ja Andrew Clark, jotka saivat inspiraationsa Facebook-kirjastosta nimeltä Flux.

Yleisesti ottaen Redux on pieni kirjasto, jossa on a Yksinkertainen ja rajoitettu API, suunniteltu toimimaan ennustettavana säiliönä sovelluksen tilassa. Sen toiminta on samanlainen kuin toiminnallisen ohjelmoinnin "vähentämisen" käsite.

Reduxin historia juontaa juurensa 2015, jolloin Dan Abramov aloitti Reduxin ensimmäisen version kehittämisen valmistautuessaan pitämään puheen React Europe -konferenssissa Hot Reloadingista. Tämän prosessin aikana Abramov huomasi samankaltaisuuden Flux-kuvion ja vähennystoiminnon välillä. Tämä havainto sai hänet miettimään, voisiko Flux-myymälä todella olla supistustoiminto.

Tämän idean toteuttamiseksi Abramov otti yhteyttä Andrew Clarkiin, joka oli Flux-toteutuksen Flummox kirjoittaja. Yhdessä he tekivät yhteistyötä herättääkseen Reduxin henkiin ja määritelleet yhtenäisen API:n. Lisäksi he ottivat käyttöön mahdollisuuden laajennus käyttämällä väliohjelmistoa ja myymälän tehostajia, joka vaikutti merkittävästi nykyiseen Redux-ekosysteemiin ja laajensi sen mahdollisuuksia entisestään.

Redux- ja React-suhde: mikä on React

React on JavaScript-kirjasto joka keskittyy käyttöliittymien luomiseen, vaikka sen monipuolisuus ylittääkin määritelmän. Tämä Facebookin alunperin kehittämä työkalu on avoimen lähdekoodin ja laajalti käytetty, koska se pystyy luomaan nopeasti käyttöliittymiä erilaisiin sovelluksiin, mukaan lukien yhden sivun verkkosovellukset (SPA) ja Android-sovellukset. ja iOS.

Toisin kuin muut puitteet, kuten Angular, jotka tarjoavat monimutkaisempia lähestymistapoja, React on erottuu kyvystään luoda käyttöliittymiä tehokkaasti. Tämä saavutetaan käyttämällä .jsx-tiedostoja, jotka yhdistävät logiikan ja käyttöliittymän yhdeksi tiedostoksi ja on järjestetty yksiköiksi, joita kutsutaan komponenteiksi.

Virtuaalinen DOM: mikä se on?

Kun sukeltamme ReactJS:n maailmaan, kuulemme luultavasti usein käsitteestä the Virtuaalinen DOM. Tämä idea on saanut alkunsa nerokkaasta ajatuksesta: koko varsinaisen DOM:n päivittämisen sijaan muokkaamme vain sitä osaa, joka todella tarvitsee muutoksia. Vanhoissa JavaScript-sovelluksissa vastaanotimme tiedot JSON-muodossa palvelimelta ja loimme sitten täydellisen uuden HTML-koodin hahmonnettavaksi, mikä johti koko sivun päivitykseen jokaisessa muokkauksessa.

Kuinka asentaa ja määrittää Redux projektiisi

Jos haluat tietää miten Redux asennetaanTotuus on, että se ei ole ollenkaan monimutkaista. Tätä varten sinun on mentävä terminaaliin ja suoritettava sieltä seuraava komento:

npm i -S redux

Nyt sinulla on Reduxin vakaa versio asennettuna järjestelmääsi. Tietysti sinun on todennäköisesti ratkaistava joitain riippuvuuksia, kuten npm, Node.js-paketinhallinta, asennettuna. Kun tämä on tehty, asennamme nyt Reactin, jota tarvitset myös Reduxin hyödyntämiseen, sekä kehitystyökalut, jotta voit aloittaa projektiesi luomisen.

Näiden muiden pakettien asentamiseksi sinun on suoritettava seuraavat komennot:

npm i -S react-redux npm i -D redux-devtools

Nyt sinulla olisi kaikki valmiina aloittamaan. Jos siirryt pääkansioon tai hakemistoon, johon Redux on asennettu, näet, että siellä on useita alihakemistoja tai alikansioita, kuten STORE, REDUCERS, ACTIONS, TYPES. Sinun on tiedettävä, mitä kukin niistä on:

TOIMINNOT: Nämä ovat objekteja, joilla on oltava kaksi ominaisuutta, joista toinen kuvaa toiminnon tyyppiä (TYPE) ja toinen, joka kuvaa, mitä sovelluksen tilassa tulisi muuttaa.
PIENENTIMET- Reduktorit ovat toimintoja, jotka toteuttavat toimintojen käyttäytymistä. Ne muuttavat sovelluksen tilaa toiminnon kuvauksen ja tilanmuutoksen kuvauksen mukaan.
KAUPPA: on paikka, jossa toimet ja vähentäjät kohtaavat ylläpitäen ja muuttaen sovelluksen tilaa. On vain yksi ainoa.
TYYPIT: Kuten aiemmin sanoin, se on toiminnan tyyppi.

Käytännön esimerkki: Sovelluksen luominen Reduxilla

Un esimerkiksi käyttämällä Reduxia Se voisi olla seuraava, jossa yksinkertainen kirjanpitosovellus tehdään Reduxilla. Mutta tehdäksesi tämän, sinun on ensin määritettävä Redux ja määritettävä toiminnot ja supistimet:

HUOMAA: jos et osaa JS-ohjelmointikieltä etkä osaa työskennellä Reactin kanssa, sinun tulee opetella se ennen Reduxin aloittamista ymmärtääksesi paremmin, kuinka se tehdään.

// Tuo Redux-kirjastot tuonti { createStore } 'redux'sta; // Määritä toiminnot const incrementAction = { type: 'INCREMENT' }; const decrementAction = { tyyppi: 'DECREMENT' }; // Määritä reduktorin const counterReducer = (tila = 0, toiminta) => { kytkin (toiminta.tyyppi) { case 'LISÄYS': paluutila + 1; tapaus 'DECREMENT': palautustila - 1; oletus: paluutila; } }; // Luo Redux-kauppa const store = createStore(counterReducer); // Tilaa muutokset myymälässä store.subscribe(() => { console.log('Nykyinen laskurin tila:', store.getState()); }); // Lähetystoiminnot tilan muokkaamiseksi store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);

Tämä on hyvin yksinkertainen esimerkki Reduxin käytöstä. Suuremmassa sovelluksessa määrität monimutkaisemmat toiminnot ja supistimet ja yhdistät React-komponentit päästäksesi käsiksi ja päivittääksesi myymälän tilaa. Mutta tämä ainakin antaa sinulle käsityksen siitä, miten se toimii...

Hardwarelibre