Menene Redux: duk abin da kuke buƙatar sani game da wannan ɗakin karatu

Idan har yanzu baku sani ba menene Redux, A cikin wannan labarin za mu mayar da hankali ga bayyana duk abin da ya kamata ku sani game da wannan ɗakin karatu na JavaScript, da kuma amfani da shi, yadda za a iya amfani da shi, da dai sauransu. Ta wannan hanyar, zaku sami duk kayan aikin da ake buƙata don samun damar haɗa su cikin ayyukan ku na JS na gaba.

Bari mu ga yadda Redux yake!

Menene JavaScript?

JavaScript (JS), yaren shirye-shirye ne da aka fassara. Ana la'akari da yare na ma'aunin ECMAScript kuma ana siffanta shi da kasancewa mai dacewa da abu, tushen samfuri, mai mahimmanci, nau'in rauni da ƙarfi. Duk da sunansa, bai kamata a rikita shi da Java ba. Ƙirƙirar ta ta dogara ne akan la'akari na kasuwanci, biyo bayan samun Sun Microsystems (wanda ya kirkiro Java) ta Netscape Navigator (wanda ya kirkiro LiveScript) da kuma canza sunan harshen shirye-shirye.

Ainihin amfani a gefen abokin ciniki, samar da wani muhimmin sashi na masu binciken gidan yanar gizo. Wannan yana ba ku damar haɓaka ƙirar mai amfani da ƙirƙirar shafukan yanar gizo masu ƙarfi. Bugu da ƙari, ana iya amfani da JavaScript a gefen uwar garken, wanda aka sani da JavaScript-side JavaScript ko SSJS. Amfaninsa ya wuce gidan yanar gizo, gano amfani a cikin takaddun PDF da aikace-aikacen tebur, galibi widgets, da sauransu.

La JavaScript syntax yayi kama da na harsuna kamar C++ da Java, ko da yake yana karɓar sunaye da ƙa'idodi daga Java, saboda haka sunansa. Amma, kamar yadda na ambata a baya, yana da mahimmanci a lura cewa, duk da sunansu iri ɗaya, Java da JavaScript suna da ma’ana da manufa daban-daban.

A gefe guda, dole ne mu tuna cewa JavaScript yana amfani da aiwatar da Model Abun Takardun Takardun (DOM), kuma hakan JS shine kawai yaren shirye-shirye da masu bincike ke fahimta ta asali. Da farko, an yi amfani da shi a cikin shafukan yanar gizon HTML don aiki akan abokin ciniki ba tare da samun damar shiga uwar garken ba. Duk da haka, a yau ana amfani da shi sosai don aikawa da karɓar bayanai daga uwar garken, sau da yawa a hade tare da fasaha irin su AJAX. Ana fassara JavaScript a cikin wakilin mai amfani yayin da ake zazzage bayanan tare da lambar HTML.

JS Applications

JavaScript harshe ne na shirye-shirye da aka yi amfani da shi sosai a cikin aikace-aikace da mahalli iri-iri, kamar:

• Ci gaban yanar gizo: Yana da mahimmanci a ci gaban yanar gizo. Ana amfani da shi don inganta hulɗar hulɗa da ƙwarewar mai amfani akan shafukan yanar gizo da aikace-aikacen yanar gizo. Ana amfani dashi wajen ƙirƙirar nau'ikan mu'amala, tasirin gani, ingantattun bayanai na ainihin lokaci da kewayawa mai ƙarfi, da sauransu. Gaba a:
  • Gaban-ƙarshen yanar gizo: Ita ce ginshiƙin ci gaban gaba-gaba. Tsarin tsari da dakunan karatu kamar React, Angular, da Vue.js sun dogara da JavaScript don ƙirƙirar mu'amala da mu'amala mai ƙarfi a cikin aikace-aikacen yanar gizo.
  • Bayanin Yanar Gizo: Ta hanyar dandamali kamar Node.js, ana amfani da JavaScript a gefen uwar garken don gina cikakkun aikace-aikacen yanar gizo. Wannan yana ba mai haɓaka damar yin amfani da JavaScript akan duka gaba-gaba da ƙarshen aikace-aikacen, yana sauƙaƙa daidaita bayanai da gina aikace-aikace a cikin ainihin lokaci.
  • Aikace-aikacen uwar garken: Ko da yake ba kowa ba ne kamar sauran harsunan gefen uwar garken, ana amfani da JavaScript wajen haɓaka aikace-aikacen uwar garken ta hanyar Node.js. Wannan yana da amfani musamman ga aikace-aikace na lokaci-lokaci da aikace-aikace waɗanda ke ɗaukar adadin buƙatun lokaci guda.
• Aikace -aikacen hannu: Ana amfani da shi wajen haɓaka aikace-aikacen wayar hannu masu haɗaka ta amfani da tsarin kamar React Native da Ionic. Waɗannan tsarin suna ba masu haɓaka damar rubuta sau ɗaya kuma su gudanar da aikace-aikacen akan dandamali da yawa, kamar iOS da Android.
• Wasannin kan layi: Ana amfani dashi a cikin ci gaban wasanni na kan layi da wasanni masu bincike. Littattafai kamar Phaser da Three.js suna sauƙaƙa ƙirƙirar wasannin 2D da 3D masu ma'amala a cikin mai lilo.
• Aikace-aikacen Desktop: Ta hanyar kayan aiki kamar Electron, yana yiwuwa a gina aikace-aikacen tebur na giciye ta amfani da fasahar yanar gizo kamar HTML, CSS, da JavaScript.
• Tsare-tsaren Mawasa: Don ƙara ƙarin ayyuka zuwa masu binciken gidan yanar gizo, ana amfani da kari. Yawanci ana rubuta waɗannan kari a cikin JavaScript.
• Aikace-aikacen Intanet na Abubuwa (IoT): Ana amfani da shi wajen haɓaka aikace-aikace da tsarin don na'urorin IoT saboda ikonsa na sadarwa tare da kayan aiki da na'urori masu auna firikwensin ta APIs da ɗakunan karatu na musamman.

Menene Redux kuma ta yaya yake aiki?

Redux babban ɗakin karatu ne na JavaScript wanda ake amfani da shi don sarrafa yanayi a aikace-aikace, kuma harshen aikin Elm ya rinjaye shi. Yawancin lokaci ana haɗa shi da sauran ɗakunan karatu kamar React ko Angular don gina mu'amalar mai amfani. Dan Abramov da Andrew Clark ne suka dauki ciki, wadanda aka yi wahayi daga dakin karatu na Facebook mai suna Flux.

Gabaɗaya magana, Redux ƙaramin ɗakin karatu ne tare da a API mai sauƙi da iyaka, an ƙera don yin aiki azaman akwati mai tsinkaya don yanayin aikace-aikacen. Ayyukansa yayi kama da manufar "raguwa" a cikin shirye-shiryen aiki.

Redux tarihin kowane zamani 2015, lokacin da Dan Abramov ya fara haɓaka sigar farko ta Redux yayin da ake shirin ba da jawabi a taron React Turai game da Zazzafan Sakewa. A lokacin wannan tsari, Abramov ya lura da kamance tsakanin tsarin Flux da aikin ragewa. Wannan kallon ya sa shi yin mamakin ko kantin Flux zai iya zama ainihin aikin ragewa.

Don aiwatar da wannan ra'ayi, Abramov ya tuntubi Andrew Clark, wanda shine marubucin aiwatar da Flux da ake kira Flummox. Tare sun haɗa kai don kawo Redux zuwa rayuwa kuma sun ayyana API mai daidaituwa. Bugu da ƙari, sun aiwatar da ikon yin hakan tsawo ta amfani da middleware da masu haɓakawa na kantin sayar da kayayyaki, wanda ya ba da gudummawa sosai ga yanayin yanayin Redux na yanzu, yana ƙara fadada damarsa.

Redux da React dangantaka: menene React

React shine ɗakin karatu na JavaScript wanda ke mayar da hankali kan ƙirƙirar mu'amalar masu amfani, duk da cewa ƙarfinsa ya wuce wannan ma'anar. Wannan kayan aiki, wanda Facebook ya kirkira da farko, buɗaɗɗen tushe ne kuma ana amfani da shi sosai saboda ikonsa na ƙirƙirar mu'amalar masu amfani da sauri a cikin aikace-aikace iri-iri, gami da aikace-aikacen gidan yanar gizo guda ɗaya (SPA) da aikace-aikacen Android da iOS.

Ba kamar sauran tsarin ba, kamar Angular, waɗanda ke ba da ƙarin hadaddun hanyoyi, React shine ya fito fili don ikonsa na samar da mu'amalar masu amfani yadda ya kamata. Ana samun wannan ta hanyar amfani da fayilolin .jsx, waɗanda ke haɗa ma'ana da ƙirar mai amfani a cikin fayil ɗaya kuma an tsara su cikin raka'a da ake kira abubuwan haɗin gwiwa.

Virtual DOM: menene?

Lokacin da muka shiga cikin duniyar ReactJS, mai yiwuwa mukan ji akai-akai game da manufar Virtual DOM. Wannan ra'ayin ya samo asali ne daga ra'ayi mai ban sha'awa: maimakon sabunta duk ainihin DOM, kawai muna gyara ɓangaren da ke buƙatar canje-canje. A cikin tsoffin aikace-aikacen JavaScript, mun kasance muna karɓar bayanai a cikin tsarin JSON daga uwar garken sannan mu samar da cikakken sabon HTML don bayarwa, yana haifar da sabuntawa ga duka shafin akan kowane canji.

Yadda ake shigar da daidaita Redux a cikin aikin ku

Idan kana son sani yadda ake shigar da ReduxGaskiyar ita ce ba ta da rikitarwa ko kadan. Don yin wannan dole ne ku je tashar tashar kuma daga nan dole ne ku aiwatar da umarni mai zuwa:

npm i -S redux

Yanzu kuna da ingantaccen sigar Redux da aka sanya akan tsarin ku. Tabbas, tabbas kuna buƙatar warware wasu abubuwan dogaro, kamar samun npm, mai sarrafa fakitin Node.js, shigar. Da zarar an yi haka, yanzu za mu shigar da React, wanda kuma za ku buƙaci amfani da Redux, da kayan aikin haɓaka don samun damar fara ƙirƙirar ayyukanku.

Don shigar da waɗannan fakitin, umarni dole ne ku aiwatar su ne:

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

Yanzu za ku shirya komai don farawa. Idan ka je babban fayil ko directory ɗin da aka shigar da Redux, za ka ga cewa akwai ƙananan bayanai ko manyan fayiloli da yawa, kamar STORE, REDUCERS, ACTIONS, TYPES. Dole ne ku san mene ne kowannensu:

• AIKI: Waɗannan abubuwa ne waɗanda dole ne su kasance suna da kaddarori guda biyu, ɗaya wanda ke bayyana nau'in (TYPE) na aikin da kuma wani wanda ke bayyana abin da yakamata a canza a cikin yanayin app.
• MASU RAGE- Rage ayyuka ne da ke aiwatar da halayen ayyuka. Suna canza yanayin ƙa'idar, dangane da bayanin aikin da bayanin canjin jihar.
• store: shine wurin da ayyuka da masu ragewa ke haduwa, kiyayewa da canza yanayin app. Akwai daya kawai.
• TYPES: kamar yadda na fada a baya, nau'in aiki ne.

Misali mai aiki: Ƙirƙirar aikace-aikace tare da Redux

Un Misali ta amfani da Redux Zai iya zama mai zuwa, inda aka yi aikace-aikacen lissafin kuɗi mai sauƙi ta amfani da Redux. Amma don yin wannan, dole ne ku fara saita Redux kuma ku ayyana ayyukanku da masu ragewa:

// Shigo da ɗakunan karatu na Redux suna shigo da dakunan karatu {creat Store} daga 'redux'; // Ƙayyade ayyukan const incrementAction = {nau'in: 'INCREMENT'}; const decrementAction = {nau'in: 'DECREMENT'}; // Ƙayyade mai ragewa const counterReducer = (jihar = 0, mataki) => {canjawa (aiki.type) {lilin 'INCREMENT': dawo da jihar + 1; shari'ar 'RAGEWA': dawowar jihar - 1; tsoho: yanayin dawowa; } ; // Ƙirƙiri kantin sayar da kayan ajiya na Redux = createStore (counterReducer); // Biyan kuɗi zuwa canje-canje a cikin kantin sayar da.subscribe(() => {console.log('Yanzu counter:',store.getState());}); // Ayyuka na aika don gyara kantin sayar da jihar.dispatch(incrementAction); store.dispatch (incrementAction); store.dispatch (decrementAction);

Wannan misali ne mai sauƙi na yadda ake amfani da Redux. A cikin babban ƙa'ida, zaku ayyana ƙarin hadaddun ayyuka da masu ragewa da haɗa abubuwan React don samun dama da sabunta yanayin shagon. Amma aƙalla wannan yana ba ku ra'ayin yadda yake aiki ...