Inā ʻaʻole ʻoe ʻike he aha ka Redux, ma kēia ʻatikala e nānā mākou i ka wehewehe ʻana i nā mea āpau āu e ʻike ai e pili ana i kēia waihona o pio ka, a me kona hoʻohana ʻana, pehea e hoʻohana ai, etc. Ma kēia ala, e loaʻa iā ʻoe nā mea pono āpau e hiki ai ke hoʻohui iā ia i kāu mau papahana JS e hiki mai ana.
E ʻike kākou i ke ʻano o Redux!
ʻO
He aha ka JavaScript?
JavaScript (JS), he ʻōlelo papahana i unuhi ʻia. Manaʻo ʻia ʻo ia he dialect o ka maʻamau ECMAScript a ua ʻike ʻia ʻo ia ma ke ʻano o ke ʻano mea, prototype-based, imperative, weakly typed and dynamic. ʻOiai kona inoa, ʻaʻole pono e huikau me Java. Hoʻokumu ʻia kāna hana ʻana ma luna o nā noʻonoʻo pāʻoihana, ma hope o ka loaʻa ʻana o Sun Microsystems (mea hana Java) e Netscape Navigator (mea hana LiveScript) a me ka hoʻololi ʻana o ka inoa o ka ʻōlelo papahana.
Nui loa hoʻohana ʻia ma ka ʻaoʻao o ka mea kūʻai aku, e lilo ana i mea nui o nā polokalamu kele pūnaewele. ʻAe kēia iā ʻoe e hoʻomaikaʻi i ka mea hoʻohana a hana i nā ʻaoʻao pūnaewele ikaika. Eia hou, hiki ke hoʻohana ʻia ka JavaScript ma ka ʻaoʻao kikowaena, i kapa ʻia ʻo JavaScript ʻaoʻao Server a i ʻole SSJS. ʻOi aku ka hoʻohana ʻana ma waho o ka pūnaewele, ʻike i ka hoʻohana ʻana i nā palapala PDF a me nā noi papa, ka nui o nā widget, etc.
La Ua like ka JavaScript syntax me nā ʻōlelo e like me C++ a me Java, ʻoiai ua lawe ʻo ia i nā inoa a me nā kuʻina mai Java, no laila kona inoa. Akā, e like me kaʻu i ʻōlelo ai ma mua, he mea nui e hoʻomaopopo, ʻoiai ko lākou inoa like, ʻo Java a me JavaScript he mau semantics a me nā kumu like ʻole.
Ma ka ʻaoʻao ʻē aʻe, pono mākou e hoʻomanaʻo i ka hoʻohana ʻana o JavaScript i kahi hoʻokō o ka Document Object Model (DOM), a ʻo ia ʻO JS wale nō ka ʻōlelo papahana i hoʻomaopopo maoli ʻia e ka poʻe mākaʻikaʻi. I ka wā mua, ua hoʻohana ʻia ma nā ʻaoʻao pūnaewele HTML no nā hana ma ka mea kūʻai aku me ka ʻole o ke komo ʻana i ke kikowaena. Eia naʻe, i kēia lā ua hoʻohana nui ʻia e hoʻouna a loaʻa i ka ʻike mai ka kikowaena, pinepine i hui pū ʻia me nā ʻenehana e like me AJAX. Wehewehe ʻia ʻo JavaScript i ka mea hoʻohana a hoʻoiho ʻia nā ʻōlelo me ka code HTML.
Nā noi JS
He ʻōlelo hoʻolālā ʻo JavaScript i hoʻohana nui ʻia ma nā ʻano noi a me nā pōʻaiapili, e like me:
- Hoʻolālā pūnaewele: He mea nui ia i ka hoʻomohala pūnaewele. Hoʻohana ʻia ia e hoʻomaikaʻi i ka launa pū ʻana a me ka ʻike mea hoʻohana ma nā pūnaewele a me nā noi pūnaewele. Hoʻohana ʻia ia i ka hana ʻana i nā ʻano pānaʻi, nā hopena ʻike, nā hōʻoia ʻikepili i ka manawa maoli a me ka hoʻokele ikaika, a me nā mea ʻē aʻe. Aia ma:
- Paena mua-hope: ʻO ia ka pōhaku kihi o ka hoʻomohala mua. Ke hilinaʻi nei nā Frameworks a me nā hale waihona puke e like me React, Angular, a me Vue.js i JavaScript no ka hana ʻana i nā mea hoʻohana pili a me ka ikaika i nā noi pūnaewele.
- Paena hope: Ma o nā paepae e like me Node.js, hoʻohana ʻia ʻo JavaScript ma ka ʻaoʻao kikowaena e kūkulu i nā noi pūnaewele piha. ʻAe kēia i ka mea hoʻomohala e hoʻohana i ka JavaScript ma ka ʻaoʻao mua a me ka hope hope o kahi noi, e maʻalahi ka hoʻonohonoho ʻana i ka ʻikepili a kūkulu i nā noi i ka manawa maoli.
- Nā polokalamu kikowaena: ʻOiai ʻaʻole maʻamau e like me nā ʻōlelo ʻaoʻao server ʻē aʻe, hoʻohana ʻia ʻo JavaScript i ka hoʻomohala noiʻi kikowaena ma o Node.js. He mea maikaʻi loa kēia no nā noi manawa maoli a me nā noi e mālama i ka nui o nā noi like.
- Nā polokalamu kelepona: Hoʻohana ʻia ia i ka hoʻomohala ʻana i nā noi mobile hybrid me ka hoʻohana ʻana i nā frameworks e like me React Native a me Ionic. Hāʻawi kēia mau papa hana i nā mea hoʻomohala e kākau hoʻokahi a holo i ka noi ma nā kahua he nui, e like me iOS a me Android.
- Nā pāʻani pūnaewele: Hoʻohana ʻia ia i ka hoʻomohala ʻana i nā pāʻani pūnaewele a me nā pāʻani polokalamu kele pūnaewele. Maʻalahi nā hale waihona puke e like me Phaser a me Three.js i ka hana ʻana i nā pāʻani pāʻani 2D a me 3D i ka polokalamu kele pūnaewele.
- Nā polokalamu papapihi: Ma o nā mea hana e like me Electron, hiki ke kūkulu i nā noi papa cross-platform me ka hoʻohana ʻana i nā ʻenehana pūnaewele e like me HTML, CSS, a me JavaScript.
- Nā mea hoʻonui pūnaewele: No ka hoʻohui ʻana i nā hana hou i nā polokalamu kele pūnaewele, hoʻohana ʻia nā hoʻonui. Ua kākau pinepine ʻia kēia mau hoʻonui ma JavaScript.
- Nā noi pūnaewele o nā mea (IoT): Hoʻohana ʻia ia i ka hoʻomohala ʻana i nā noi a me nā ʻōnaehana no nā polokalamu IoT ma muli o kona hiki ke kamaʻilio me nā lako a me nā ʻike ma o nā API a me nā hale waihona puke kūikawā.
He aha ka Redux a pehea e hana ai?
ʻO Redux kahi waihona waihona JavaScript i hoʻohana ʻia e hoʻokele mokuʻāina i nā noi, a i hoʻoikaika ʻia e ka ʻōlelo hana Elm. Hoʻohui pinepine ʻia me nā hale waihona puke ʻē aʻe e like me React a i ʻole Angular e kūkulu i nā mea hoʻohana. Ua hāpai ʻia e Dan Abramov lāua ʻo Andrew Clark, nā mea i hoʻoikaika ʻia e ka waihona Facebook i kapa ʻia ʻo Flux.
ʻO ka mea maʻamau, ʻo Redux kahi waihona liʻiliʻi me kahi API maʻalahi a kaupalena ʻia, i hoʻolālā ʻia e hana ma ke ʻano he pahu wānana no ke kūlana noi. Ua like kāna hana me ka manaʻo o "hōʻemi" i ka hoʻolālā hana.
ʻO ka moʻolelo o Redux i hoʻi mai 2015, i ka wā i hoʻomaka ai ʻo Dan Abramov e hoʻomohala i ka mana mua o Redux ʻoiai e hoʻomākaukau ana e hāʻawi i kahi kamaʻilio ma ka ʻaha kūkā ʻo React Europe e pili ana i ka Hot Reloading. I loko o kēia kaʻina hana, ʻike ʻo Abramov i ka like ma waena o ke ʻano Flux a me ka hana hoʻemi. Ua alakaʻi kēia ʻike iā ia e noʻonoʻo inā hiki i kahi hale kūʻai Flux ke lilo i mea hoʻemi.
No ka hoʻokō ʻana i kēia manaʻo, ua hoʻopili ʻo Abramov iā Andrew Clark, ʻo ia ke kumu o ka hoʻokō Flux i kapa ʻia ʻo Flummox. Ua hui pū lākou e hoʻōla iā Redux a wehewehe i kahi API pili. Eia kekahi, ua hoʻokō lākou i ka hiki ke hoʻonui me ka hoʻohana ʻana i nā middleware a me nā mea hoʻonui hale kūʻai, ka mea i hāʻawi nui i ke kaiaola Redux o kēia manawa, e hoʻonui hou ana i kona hiki.
ʻO ka pilina Redux a me React: he aha ka React
He waihona JavaScript ʻo React ka mea e kālele ana i ka hana ʻana i nā mea hoʻohana, ʻoiai ʻoi aku kona versatility ma mua o kēlā wehewehe. ʻO kēia mea hana, i hoʻokumu mua ʻia e Facebook, he kumu wehe a hoʻohana nui ʻia ma muli o kona hiki ke hana wikiwiki i nā mea hoʻohana ma nā ʻano noi like ʻole, me nā noi pūnaewele ʻaoʻao hoʻokahi (SPA) a me nā noi Android a me iOS.
ʻAʻole like me nā papa hana ʻē aʻe, e like me Angular, e hāʻawi ana i nā ala paʻakikī, ʻo React kū i waho no kona hiki ke hana i nā mea hoʻohana pono. Loaʻa kēia ma o ka hoʻohana ʻana i nā faila .jsx, kahi e hui pū ai i ka loiloi a me ka mea hoʻohana i loko o kahi faila hoʻokahi a hoʻonohonoho ʻia i nā ʻāpana i kapa ʻia nā ʻāpana.
Virtual DOM: he aha ia?
Ke komo mākou i ka honua o ReactJS, lohe pinepine mākou i ka manaʻo o ka Hoʻolaha Kiʻi. Hoʻomaka kēia manaʻo mai kahi manaʻo noʻonoʻo: ma kahi o ka hoʻonui ʻana i ka DOM maoli holoʻokoʻa, hoʻololi wale mākou i ka ʻāpana e pono ai nā loli. Ma nā polokalamu JavaScript kahiko, ua hoʻohana mākou i ka loaʻa ʻana o ka ʻikepili ma ke ʻano JSON mai ke kikowaena a laila hoʻopuka i kahi HTML hou piha e hoʻolilo, e hopena i ka hōʻoluʻolu o ka ʻaoʻao holoʻokoʻa i kēlā me kēia hoʻololi.
Pehea e hoʻouka a hoʻonohonoho iā Redux i kāu papahana
Inā makemake ʻoe e ʻike pehea e hoʻouka ai iā ReduxʻO ka ʻoiaʻiʻo ʻaʻole ia he paʻakikī loa. No ka hana ʻana i kēia, pono ʻoe e hele i ka terminal a mai laila pono ʻoe e hoʻokō i kēia kauoha:
npm i -S redux
I kēia manawa ua hoʻokomo ʻia ka mana paʻa o Redux ma kāu ʻōnaehana. ʻOiaʻiʻo, pono paha ʻoe e hoʻoholo i kekahi mau hilinaʻi, e like me ka loaʻa ʻana o ka npm, ka luna pūʻolo Node.js, i hoʻokomo ʻia. Ke pau kēia, e hoʻokomo mākou i ka React, kahi āu e pono ai e hoʻohana pono iā Redux, a me nā mea hana hoʻomohala e hiki ai ke hoʻomaka i ka hana ʻana i kāu mau papahana.
No ka hoʻokomo ʻana i kēia mau pūʻolo ʻē aʻe, ʻo nā kauoha āu e hoʻokō ai:
npm i -S react-redux npm i -D redux-devtools
I kēia manawa e mākaukau nā mea a pau e hoʻomaka. Inā hele ʻoe i ka waihona nui a i ʻole ka papa kuhikuhi kahi i hoʻokomo ʻia ai ʻo Redux, e ʻike ʻoe aia kekahi mau subdirectories a i ʻole subfolders, e like me STORE, REDUCERS, ACTIONS, TYPES. Pono ʻoe e ʻike i ke ʻano o kēlā me kēia:
- NA HANA: He mau mea keia e pono e loaa elua waiwai, hookahi e wehewehe ana i ke ano (TYPE) o ka hana a me kekahi e wehewehe ana i na mea e pono ke hoololiia ma ke kulana o ka app.
- NA MEA HOemi- ʻO nā mea hoʻemi he mau hana e hoʻokō i ka ʻano o nā hana. Hoʻololi lākou i ke kūlana o ka app, ma muli o ka wehewehe ʻana i ka hana a me ka wehewehe ʻana o ka hoʻololi mokuʻāina.
- Shop: ʻo ia kahi e hui ai nā hana a me nā mea hoʻemi, mālama a hoʻololi i ke kūlana o ka app. Hoʻokahi wale nō.
- NA ANOAI: e like me kaʻu i ʻōlelo ai ma mua, ʻo ia ke ʻano o ka hana.
Laʻana maʻamau: Ke hana ʻana i kahi noi me Redux
Un laʻana me ka hoʻohana ʻana iā Redux ʻO ia paha ka mea aʻe, kahi i hana ʻia ai kahi polokalamu helu helu maʻalahi me ka hoʻohana ʻana iā Redux. Akā e hana i kēia, pono ʻoe e hoʻonohonoho mua iā Redux a wehewehe i kāu mau hana a me nā mea hoʻemi:
// Hoʻokomo i nā hale waihona puke Redux { createStore } mai 'redux'; // E wehewehe i nā hana const incrementAction = { type: 'INCREMENT' }; const decrementAction = { ʻano: 'DECREMENT'}; // E wehewehe i ka mea hoʻemi const counterReducer = (state = 0, action) => { hoʻololi (action.type) { hihia 'INCREMENT': hoʻihoʻi moku + 1; hihia 'DECREMENT': kūlana hoʻihoʻi - 1; paʻamau: kūlana hoʻihoʻi; } }; // E hana i ka hale kūʻai Redux const store = createStore(counterReducer); // E kau inoa i nā hoʻololi i loko o ka hale kūʻai hale kūʻai.subscribe (() => { console.log('Current counter state:', store.getState());}); // Hoʻouna i nā hana e hoʻololi i ka state store.dispatch(incrementAction); hale kūʻai.dispatch(incrementAction); hale kūʻai.dispatch(decrementAction);
He laʻana maʻalahi loa kēia o ka hoʻohana ʻana iā Redux. Ma kahi polokalamu ʻoi aku ka nui, e wehewehe ʻoe i nā hana paʻakikī a me nā mea hōʻemi a hoʻohui i nā ʻāpana React e komo a hoʻohou i ke kūlana o ka hale kūʻai. Akā ma ka liʻiliʻi e hāʻawi iā ʻoe i kahi manaʻo o ka hana ʻana ...