Ukuba awukayazi yintoni Redux, kweli nqaku siza kugxila ekuchazeni yonke into omele uyazi malunga neli thala leencwadi JavaScript, kunye nokusetyenziswa kwayo, indlela enokusetyenziswa ngayo, njl. Ngale ndlela, uya kuba nazo zonke izixhobo eziyimfuneko ukuze ukwazi ukuzidibanisa kwiiprojekthi zakho ezilandelayo ze-JS.
Makhe sibone ukuba injani iRedux!
Yintoni iJavaScript?
JavaScript (JS), lulwimi lwenkqubo olutolikwayo. Ithathwa njengesiyelelane somgangatho we-ECMAScript kwaye ibonakaliswe ngokujoliswe kwinto, iprototype-based, inyanzelekile, ichwethezwe ngokubuthathaka kwaye iguquguquke. Ngaphandle kwegama layo, akufanele lidideke neJava. Indalo yayo isekelwe kwiingcamango zentengiso, emva kokufunyanwa kwe-Sun Microsystems (umdali weJava) nguNetscape Navigator (umdali we-LiveScript) kunye nokuguqulwa kwegama lolwimi lweprogram.
Ngokuyintloko esetyenziswa kwicala lomxhasi, ukwenza inxalenye ebalulekileyo yezikhangeli zewebhu. Oku kukuvumela ukuba uphucule ujongano lomsebenzisi kwaye wenze amaphepha ewebhu aguqukayo. Ukongeza, iJavaScript ingasetyenziswa kwicala leseva, eyaziwa ngokuba yi-Server-side JavaScript okanye i-SSJS. Ukusebenza kwayo kudlulela ngaphaya kwewebhu, ukufumana ukusetyenziswa kumaxwebhu ePDF kunye nezicelo zedesktop, ikakhulu amawijethi, njl.
La I-syntax yeJavaScript ifana neyeelwimi ezinje ngeC++ kunye neJava, nangona ithatha amagama kunye neengqungquthela ezivela kwiJava, ngoko ke igama layo. Kodwa, njengoko benditshilo ngaphambili, kubalulekile ukuba uqaphele ukuba, nangona igama labo elifanayo, iJava kunye neJavaScript zineentsingiselo ezahlukeneyo kunye neenjongo.
Ngakolunye uhlangothi, kufuneka sikhumbule ukuba iJavaScript isebenzisa ukuphunyezwa kweDocument Object Model (DOM), kwaye oko. I-JS kuphela kolwimi lwenkqubo oluqondwa ngabakhangeli ngokwemveli. Ekuqaleni, yayisetyenziswa kumaphepha ewebhu e-HTML kwimisebenzi kumxhasi ngaphandle kokufikelela kumncedisi. Nangona kunjalo, namhlanje isetyenziswa ngokubanzi ukuthumela kunye nokufumana ulwazi oluvela kumncedisi, ngokuphindaphindiweyo ngokudibanisa nobuchwepheshe obufana ne-AJAX. IJavaScript itolikwa kwi-arhente yomsebenzisi ngelixa iingxelo zikhutshelwa kunye nekhowudi ye-HTML.
JS izicelo
IJavaScript lulwimi lwenkqubo olusetyenziswa ngokubanzi kwiinkqubo ezahlukeneyo kunye neemeko, ezinje:
- Uphuhliso lwewebhu: Ibalulekile kuphuhliso lwewebhu. Isetyenziselwa ukuphucula intsebenziswano kunye namava omsebenzisi kwiiwebhusayithi kunye nezicelo zewebhu. Isetyenziswe ekudalweni kweefom ezisebenzisanayo, iziphumo ezibonakalayo, ukuqinisekiswa kwedatha yexesha langempela kunye nokuhamba okuguquguqukayo, phakathi kwabanye. Zikhona kwi:
- Umphambili wewebhu: Lilitye lembombo lophuhliso lwangaphambili. Izakhelo kunye namathala eencwadi afana neReact, Angular, kunye neVue.js zixhomekeke kwiJavaScript ukwenza ujongano olusebenzayo noluguquguqukayo lwabasebenzisi kwizicelo zewebhu.
- Umva wewebhu: Ngokusebenzisa amaqonga afana neNode.js, iJavaScript isetyenziswa kwicala leseva ukwakha usetyenziso olupheleleyo lwewebhu. Oku kuvumela umphuhlisi ukuba asebenzise iJavaScript kwisiphelo sangaphambili kunye nasemva-kwesiphelo sesicelo, nto leyo eyenza kube lula ukungqamanisa idatha kunye nokwakha usetyenziso ngexesha lokwenyani.
- Usetyenziso lweseva: Nangona ingaqhelekanga njengezinye iilwimi zecala leseva, iJavaScript isetyenziswa kuphuhliso lwesicelo somncedisi ngeNode.js. Oku kuluncedo kakhulu kwizicelo zexesha lokwenyani kunye nezicelo ezibamba inani elikhulu lezicelo ezihambelanayo.
- Iifowuni zeselfowuni: Isetyenziswa ekuphuhliseni usetyenziso lweselula oluxutyiweyo kusetyenziswa izikhokelo ezinje ngeReact Native kunye ne-Ionic. Ezi zicwangciso zivumela abaphuhlisi ukuba babhale kube kanye kwaye baqhube isicelo kwiiplatifti ezininzi, ezifana ne-iOS kunye ne-Android.
- Imidlalo ye-Intanethi: Isetyenziswa kuphuhliso lwemidlalo ye-intanethi kunye nemidlalo yebrawuza. Amathala eencwadi afana ne-Phaser kunye ne-Three.js yenza kube lula ukwenza imidlalo ye-2D kunye ne-3D esebenzayo kwisikhangeli.
- Usetyenziso lweDesktop: Ngezixhobo ezifana ne-Electron, kuyenzeka ukwakha usetyenziso lwe-desktop enqamlezayo usebenzisa itekhnoloji yewebhu efana neHTML, CSS, kunye neJavaScript.
- Izandiso zebhrawuza: Ukongeza umsebenzi owongezelelweyo kwiziphequluli zewebhu, izandiso zisetyenziswa. Ezi zandiso zidla ngokubhalwa kwiJavaScript.
- Izicelo ze-Intanethi yezinto (IoT): Isetyenziselwa ukuphuhlisa izicelo kunye neenkqubo zezixhobo ze-IoT ngenxa yokukwazi ukunxibelelana ne-hardware kunye neenzwa ngokusebenzisa ii-API kunye neelayibrari ezikhethekileyo.
Yintoni i-Redux kwaye isebenza njani?
I-Redux yilayibrari evulekileyo yeJavaScript esetyenziselwa ukulawula urhulumente kwizicelo, kwaye iphenjelelwe lulwimi olusebenzayo lwe-Elm. Ihlala idityaniswa namanye amathala eencwadi afana neReact okanye i-Angular ukwakha ujongano lomsebenzisi. Yakhulelwa nguDan Abramov kunye no-Andrew Clark, abaphefumlelwe yilayibrari ye-Facebook ebizwa ngokuba yiFlux.
Ngokubanzi, i-Redux yilayibrari encinci ene I-API elula kwaye ilinganiselwe, eyilelwe ukusebenza njengesikhongozeli esinokuqikelelwa kwimeko yesicelo. Ukusebenza kwayo kufana nengcamango "yokunciphisa" kwiprogram esebenzayo.
Imbali yeRedux iqala emva Ngo-2015, xa uDan Abramov eqala ukuphuhlisa inguqulo yokuqala ye-Redux ngelixa ulungiselela ukunika intetho kwinkomfa ye-React Europe malunga noKulayishwa kwakhona okushushu. Ngethuba le nkqubo, u-Abramov waqaphela ukufana phakathi kwepateni ye-Flux kunye nomsebenzi wokunciphisa. Olu qwalaselo lwamkhokelela ekubeni azibuze ukuba ivenkile yeFlux ngokwenene ingaba ngumsebenzi wokunciphisa.
Ukuphumeza le ngcamango, u-Abramov waqhagamshelana no-Andrew Clark, owayengumbhali wokuphunyezwa kweFlux ebizwa ngokuba yiFlummox. Ngokudibeneyo baye basebenzisana ukuzisa i-Redux ebomini kwaye bachaza i-API ehambelanayo. Ukongeza, basebenzise ukukwazi ukwenza ulwandiso usebenzisa i-middleware kunye neziphuculi zevenkile, ethe yanegalelo elikhulu kwinkqubo yangoku ye-Redux ecosystem, yandisa nangakumbi amathuba ayo.
Ubudlelwane be-redux kunye ne-React: yintoni i-React
I-React yilayibrari yeJavaScript egxile ekudaleni ujongano lomsebenzisi, nangona ukuguquguquka kwayo kuhamba ngaphaya kwaloo nkcazo. Esi sixhobo, esaphuhliswa ekuqaleni ngu-Facebook, singumthombo ovulekileyo kwaye sisetyenziswa ngokubanzi ngenxa yokukwazi ukudala ngokukhawuleza ujongano lomsebenzisi kwiinkqubo ezahlukeneyo, kubandakanywa izicelo zewebhu zekhasi elinye (i-SPA) kunye nezicelo ze-Android. kunye ne-iOS.
Ngokungafaniyo nezinye izikhokelo, ezinje nge-Angular, ezibonelela ngeendlela ezinzima ngakumbi, i-React is ibalasele ngokukwazi kwayo ukwenza ujongano lomsebenzisi ngokufanelekileyo. Oku kuphunyezwa ngokusetyenziswa kweefayile ze-jsx, ezidibanisa ingqiqo kunye nojongano lomsebenzisi kwifayile enye kwaye zilungelelaniswe zibe ziiyunithi ezibizwa ngokuba ngamacandelo.
I-DOM ebonakalayo: yintoni?
Xa singena kwihlabathi le-ReactJS, mhlawumbi siva rhoqo malunga nombono we DOM ebonakalayo. Olu luvo lusuka kwingcinga ekrelekrele: endaweni yokuhlaziya eyona DOM yokwenyani, siguqula kuphela indawo efuna utshintsho ngokwenene. Kusetyenziso oludala lweJavaScript, sasidla ngokufumana idatha kwifomati ye-JSON kwiseva kwaye emva koko sivelise iHTML entsha epheleleyo yokunikezela, okukhokelela kuhlaziyo lwephepha lonke kulungiso ngalunye.
Indlela yokufaka kunye nokuqwalasela i-Redux kwiprojekthi yakho
Ukuba ufuna ukwazi uyifakela njani iReduxInyaniso yeyokuba ayintsonkothanga kwaphela. Ukwenza oku kufuneka uye kwi-terminal kwaye ukusuka apho kufuneka uphumeze lo myalelo ulandelayo:
npm i -S redux
Ngoku unenguqulelo ezinzileyo yeRedux efakwe kwinkqubo yakho. Kunjalo, kuya kufuneka usombulule ukuxhomekeka, okunje ngokuba ne-npm, iNode.js yomphathi wephakheji, efakiwe. Nje ukuba kwenziwe oku, ngoku siza kufaka i-React, oya kuyidinga kwakhona ukuba usebenzise i-Redux, kunye nezixhobo zophuhliso ukuze ukwazi ukuqalisa ukwenza iiprojekthi zakho.
Ukufakela ezinye iipakethe, imiyalelo omawuyenze yile:
npm i -S react-redux npm i -D redux-devtools
Ngoku ubuya kuba yonke into ilungile ukuqalisa. Ukuba uya kulawulo oluphambili okanye ulawulo apho i-Redux ifakwe khona, uya kubona ukuba kukho amacandelo angaphantsi okanye abalawuli abaphantsi, njenge-STORE, REDUCERS, ACTIONS, TYPES. Kuya kufuneka wazi ukuba yintoni na nganye:
- IZENZO: Ezi zizinto ekufuneka zibeneempawu ezimbini, enye ichaza uhlobo (TYPE) yesenzo kwaye enye ichaza into ekufuneka itshintshwe kwimeko yosetyenziso.
- ABANCISI- Abanciphisi yimisebenzi ephumeza ukuziphatha kwezenzo. Batshintsha imeko ye-app, kuxhomekeke kwinkcazo yesenzo kunye nenkcazo yenguqu yelizwe.
- UKULONDOLOZWA: yindawo apho iintshukumo kunye nabanciphisi badibana khona, ukugcina kunye nokutshintsha imeko ye-app. Inye kuphela.
- IIMPAWU: njengoko benditshilo ngaphambili, luhlobo lwesenzo.
Umzekelo osebenzayo: Ukwenza isicelo ngeRedux
Un umzekelo usebenzisa Redux Isenokuba yile ilandelayo, apho usetyenziso lwe-accounting olulula lwenziwa kusetyenziswa i-Redux. Kodwa ukwenza oku, kufuneka uqale uqwalasele i-Redux kwaye uchaze izenzo zakho kunye nabanciphisi:
// Ngenisa ngaphandle amathala eencwadi e-Redux { createStore } ukusuka 'ku-redux'; // Chaza izenzo const incrementAction = {uhlobo: 'UNYUZO'}; const decrementAction = {uhlobo: 'UKUMISELWA'}; // Chaza i-reducer const counterReducer = (ilizwe = 0, isenzo) => {tshintsha (isenzo. uhlobo) {ityala 'UKUNYUKA': buyisela imo + 1; imeko 'UKUMISELWA': imeko yokubuyisela - 1; ukungagqibekanga: imo yokubuyisela; }} // Yenza i-redux store const store = createStore(counterReducer); // Bhalisela utshintsho kwivenkile yevenkile.rhuma (() => {console.log('Imeko yangoku yokubala:', store.getState()); }); // Iintshukumo zokuthumela ukuguqula i-state store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Lo ngumzekelo olula kakhulu wendlela yokusebenzisa i-Redux. Kwi-app enkulu, ungachaza iintshukumo ezintsonkothileyo kunye nabanciphisi kwaye uqhagamshele izinto zeReact ukufikelela kunye nokuhlaziya imeko yevenkile. Kodwa ubuncinci oku kukunika umbono wendlela esebenza ngayo...