Ja jūs joprojām nezināt kas ir Redux, šajā rakstā mēs pievērsīsimies tam, lai izskaidrotu visu, kas jums jāzina par šo bibliotēku JavaScript, kā arī tā pielietojumu, kā to var izmantot utt. Tādā veidā jums būs visi nepieciešamie rīki, lai varētu to integrēt savos nākamajos JS projektos.
Paskatīsimies, kāds ir Redux!
Kas ir JavaScript?
JavaScript (JS), ir tulkota programmēšanas valoda. Tas tiek uzskatīts par ECMAScript standarta dialektu, un to raksturo uz objektu orientēts, uz prototipu balstīts, imperatīvs, vāji rakstīts un dinamisks. Neskatoties uz nosaukumu, to nevajadzētu sajaukt ar Java. Tā izveide ir balstīta uz komerciāliem apsvērumiem pēc Sun Microsystems (Java radītāja) iegādes Netscape Navigator (LiveScript radītāja) un programmēšanas valodas nosaukuma maiņas.
Galvenokārt izmanto klienta pusē, kas ir tīmekļa pārlūkprogrammu neatņemama sastāvdaļa. Tas ļauj uzlabot lietotāja saskarni un izveidot dinamiskas tīmekļa lapas. Turklāt JavaScript var izmantot servera pusē, kas pazīstams kā servera puses JavaScript vai SSJS. Tās pielietojamība sniedzas ne tikai tīmeklī, bet arī PDF dokumentos un darbvirsmas lietojumprogrammās, galvenokārt logrīkos utt.
La JavaScript sintakse atgādina tādu valodu kā C++ un Java sintakse, lai gan tā pārņem nosaukumus un konvencijas no Java, tāpēc arī tā nosaukums. Bet, kā jau minēju iepriekš, ir svarīgi atzīmēt, ka, neskatoties uz to līdzīgo nosaukumu, Java un JavaScript ir atšķirīga semantika un mērķi.
No otras puses, mums jāatceras, ka JavaScript izmanto dokumenta objekta modeļa (DOM) ieviešanu un ka JS ir vienīgā programmēšanas valoda, ko pārlūkprogrammas saprot sākotnēji. Sākotnēji tas tika izmantots HTML tīmekļa lapās operācijām ar klientu bez piekļuves serverim. Tomēr mūsdienās to plaši izmanto, lai nosūtītu un saņemtu informāciju no servera, bieži vien kopā ar tādām tehnoloģijām kā AJAX. JavaScript tiek interpretēts lietotāja aģentā, kamēr paziņojumi tiek lejupielādēti kopā ar HTML kodu.
JS lietojumprogrammas
JavaScript ir programmēšanas valoda, ko plaši izmanto dažādās lietojumprogrammās un kontekstos, piemēram:
- Web izstrāde: Tas ir būtiski tīmekļa izstrādē. To izmanto, lai uzlabotu interaktivitāti un lietotāju pieredzi vietnēs un tīmekļa lietojumprogrammās. To cita starpā izmanto interaktīvu formu, vizuālo efektu, reāllaika datu validācijas un dinamiskās navigācijas izveidē. Klāt:
- Tīmekļa priekšgals: Tas ir priekšgala attīstības stūrakmens. Ietvarus un bibliotēkas, piemēram, React, Angular un Vue.js, izmanto JavaScript, lai tīmekļa lietojumprogrammās izveidotu interaktīvas un dinamiskas lietotāja saskarnes.
- Tīmekļa aizmugursistēma: Izmantojot tādas platformas kā Node.js, JavaScript tiek izmantots servera pusē, lai izveidotu pilnīgas tīmekļa lietojumprogrammas. Tas ļauj izstrādātājam izmantot JavaScript gan lietojumprogrammas priekšgalā, gan aizmugurē, tādējādi atvieglojot datu sinhronizāciju un lietojumprogrammu izveidi reāllaikā.
- Servera lietojumprogrammas: Lai gan JavaScript nav tik izplatīts kā citas servera puses valodas, tas tiek izmantots servera lietojumprogrammu izstrādē, izmantojot Node.js. Tas ir īpaši noderīgi reāllaika lietojumprogrammām un lietojumprogrammām, kas apstrādā lielu skaitu vienlaicīgu pieprasījumu.
- Mobilās lietotnes: To izmanto hibrīdu mobilo lietojumprogrammu izstrādē, izmantojot tādus ietvarus kā React Native un Ionic. Šīs sistēmas ļauj izstrādātājiem rakstīt vienu reizi un palaist lietojumprogrammu vairākās platformās, piemēram, iOS un Android.
- Tiešsaistes spēles: To izmanto tiešsaistes spēļu un pārlūkprogrammas spēļu izstrādē. Bibliotēkas, piemēram, Phaser un Three.js, ļauj ērti izveidot interaktīvas 2D un 3D spēles pārlūkprogrammā.
- Darbvirsmas lietojumprogrammas: Izmantojot tādus rīkus kā Electron, ir iespējams izveidot starpplatformu darbvirsmas lietojumprogrammas, izmantojot tādas tīmekļa tehnoloģijas kā HTML, CSS un JavaScript.
- Pārlūka paplašinājumi: Lai tīmekļa pārlūkprogrammām pievienotu papildu funkcionalitāti, tiek izmantoti paplašinājumi. Šie paplašinājumi parasti ir rakstīti JavaScript.
- Lietu interneta (IoT) lietojumprogrammas: To izmanto lietojumprogrammu un sistēmu izstrādē IoT ierīcēm, jo tā spēj sazināties ar aparatūru un sensoriem, izmantojot API un specializētas bibliotēkas.
Kas ir Redux un kā tas darbojas?
Redux ir atvērtā koda JavaScript bibliotēka kas tiek izmantots stāvokļa pārvaldībai lietojumprogrammās, un to ietekmē Elm funkcionālā valoda. To bieži apvieno ar citām bibliotēkām, piemēram, React vai Angular, lai izveidotu lietotāja saskarnes. To radīja Dens Abramovs un Endrjū Klārks, kurus iedvesmoja Facebook bibliotēka ar nosaukumu Flux.
Vispārīgi runājot, Redux ir neliela bibliotēka ar a Vienkārša un ierobežota API, kas paredzēts, lai darbotos kā paredzams konteiners pielietojuma stāvoklim. Tās darbība ir līdzīga jēdzienam "samazināt" funkcionālajā programmēšanā.
Redux vēsture aizsākās līdz 2015. gads, kad Dens Abramovs sāka izstrādāt pirmo Redux versiju gatavojoties uzstāties React Europe konferencē par Hot Reloading. Šī procesa laikā Abramovs pamanīja līdzību starp plūsmas modeli un reduktora funkciju. Šis novērojums lika viņam aizdomāties, vai Flux veikals patiešām varētu būt reduktora funkcija.
Lai īstenotu šo ideju, Abramovs sazinājās ar Endrjū Klārku, kurš bija Flux ieviešanas ar nosaukumu Flummox autors. Kopā viņi sadarbojās, lai atdzīvinātu Redux, un definēja saskaņotu API. Turklāt viņi īstenoja spēju paplašinājumu, izmantojot starpprogrammatūru un veikala uzlabotājus, kas būtiski veicināja pašreizējo Redux ekosistēmu, vēl vairāk paplašinot tās iespējas.
Redux un React attiecības: kas ir React
React ir JavaScript bibliotēka kas koncentrējas uz lietotāja saskarņu izveidi, lai gan tā daudzpusība pārsniedz šo definīciju. Šis rīks, ko sākotnēji izstrādāja Facebook, ir atvērtā pirmkoda un plaši izmantots, jo tas spēj ātri izveidot lietotāja saskarnes dažādās lietojumprogrammās, tostarp vienas lapas tīmekļa lietojumprogrammās (SPA) un Android lietojumprogrammās. un iOS.
Atšķirībā no citiem ietvariem, piemēram, Angular, kas piedāvā sarežģītākas pieejas, React ir izceļas ar spēju ģenerēt lietotāja saskarnes efektīvi. Tas tiek panākts, izmantojot .jsx failus, kas apvieno loģiku un lietotāja interfeisu vienā failā un ir sakārtoti vienībās, ko sauc par komponentiem.
Virtuālais DOM: kas tas ir?
Kad mēs iedziļināmies ReactJS pasaulē, mēs, iespējams, bieži dzirdam par jēdzienu Virtuālais DOM. Šīs idejas pamatā ir ģeniāls priekšstats: tā vietā, lai atjauninātu visu faktisko DOM, mēs modificējam tikai to daļu, kurai patiešām ir vajadzīgas izmaiņas. Vecajās JavaScript lietojumprogrammās mēs no servera saņēmām datus JSON formātā un pēc tam ģenerējām pilnu jaunu HTML, kā rezultātā tika atsvaidzināta visa lapa katrā modifikācijā.
Kā instalēt un konfigurēt Redux savā projektā
Ja jūs vēlaties zināt kā instalēt ReduxPatiesība ir tāda, ka tas nemaz nav sarežģīti. Lai to izdarītu, jums jādodas uz termināli un no turienes jāizpilda šāda komanda:
npm i -S redux
Tagad jūsu sistēmā ir instalēta stabilā Redux versija. Protams, jums, iespējams, būs jāatrisina dažas atkarības, piemēram, jāinstalē npm, Node.js pakotņu pārvaldnieks. Kad tas būs izdarīts, mēs tagad instalēsim React, kas jums būs nepieciešams arī, lai izmantotu Redux priekšrocības, kā arī izstrādes rīkus, lai varētu sākt veidot savus projektus.
Lai instalētu šīs citas pakotnes, ir jāizpilda šādas komandas:
npm i -S reaģēt-redux npm i -D redux-devtools
Tagad jums viss būtu gatavs, lai sāktu. Ja dodaties uz galveno mapi vai direktoriju, kurā ir instalēts Redux, jūs redzēsit, ka ir vairāki apakšdirektoriji vai apakšmapes, piemēram, STORE, REDUCERS, ACTIONS, TYPES. Jums jāzina, kas katrs ir:
- DARBĪBAS: šiem objektiem ir jābūt diviem rekvizītiem: vienam, kas apraksta darbības veidu (TIPA), un otrs, kas apraksta, kas ir jāmaina lietotnes stāvoklī.
- REDUCĒJI- Reduktori ir funkcijas, kas īsteno darbību uzvedību. Tie maina lietotnes stāvokli atkarībā no darbības apraksta un stāvokļa maiņas apraksta.
- VEIKALS: ir vieta, kur satiekas darbības un samazinātāji, uzturot un mainot lietotnes stāvokli. Ir tikai viens.
- VEIDI: kā jau teicu iepriekš, tas ir darbības veids.
Praktisks piemērs: lietojumprogrammas izveide ar Redux
Un Piemēram, izmantojot Redux Tas varētu būt šāds, kur, izmantojot Redux, tiek izveidota vienkārša grāmatvedības lietotne. Bet, lai to izdarītu, vispirms ir jākonfigurē Redux un jādefinē darbības un reduktori:
// Importēt Redux bibliotēkas importēt { createStore } no 'redux'; // Definējiet darbības const incrementAction = { type: 'INCREMENT' }; const decrementAction = {tips: 'DECREMENT'}; // Definējiet reduktoru const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; gadījums 'DECREMENT': atgriešanas stāvoklis - 1; noklusējuma: atgriešanas stāvoklis; } }; // Izveidot Redux veikalu const store = createStore(counterReducer); // Abonēt izmaiņas veikalā store.subscribe(() => { console.log('Pašreizējais skaitītāja stāvoklis:', veikals.getState()); }); // Nosūtīšanas darbības, lai mainītu stāvokli store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Šis ir ļoti vienkāršs Redux lietošanas piemērs. Lielākā lietotnē jūs definētu sarežģītākas darbības un reduktorus un savienotu React komponentus, lai piekļūtu veikala stāvoklim un atjauninātu to. Bet tas vismaz sniedz priekšstatu par to, kā tas darbojas...