જો તમે હજી પણ જાણતા નથી Redux શું છે, આ લેખમાં અમે તમને આ પુસ્તકાલય વિશે જે જાણવું જોઈએ તે બધું સમજાવવા પર ધ્યાન કેન્દ્રિત કરવા જઈ રહ્યા છીએ જાવાસ્ક્રિપ્ટ, તેમજ તેના ઉપયોગો, તેનો ઉપયોગ કેવી રીતે કરી શકાય, વગેરે. આ રીતે, તમારી પાસે તમારા આગામી JS પ્રોજેક્ટ્સમાં તેને એકીકૃત કરવામાં સક્ષમ થવા માટે તમામ જરૂરી સાધનો હશે.
ચાલો જોઈએ કે Redux શું છે!
JavaScript શું છે?
JavaScript (JS), એક અર્થઘટન કરેલ પ્રોગ્રામિંગ ભાષા છે. તેને ECMAScript સ્ટાન્ડર્ડની બોલી ગણવામાં આવે છે અને તે ઑબ્જેક્ટ-ઓરિએન્ટેડ, પ્રોટોટાઇપ-આધારિત, અનિવાર્ય, નબળી રીતે ટાઇપ કરેલ અને ગતિશીલ હોવા દ્વારા વર્ગીકૃત થયેલ છે. તેનું નામ હોવા છતાં, તેને જાવા સાથે ભેળસેળ ન કરવી જોઈએ. નેટસ્કેપ નેવિગેટર (લાઇવસ્ક્રિપ્ટના નિર્માતા) દ્વારા સન માઇક્રોસિસ્ટમ્સ (જાવાના નિર્માતા)ના સંપાદન અને પ્રોગ્રામિંગ ભાષાના નામમાં ફેરફારને પગલે તેની રચના વ્યાપારી વિચારણાઓ પર આધારિત છે.
મુખ્યત્વે ગ્રાહક બાજુ પર વપરાય છે, વેબ બ્રાઉઝરનો અભિન્ન ભાગ બનાવે છે. આ તમને વપરાશકર્તા ઈન્ટરફેસ સુધારવા અને ગતિશીલ વેબ પૃષ્ઠો બનાવવા માટે પરવાનગી આપે છે. વધુમાં, JavaScript નો સર્વર બાજુ પર ઉપયોગ કરી શકાય છે, જેને સર્વર-સાઇડ JavaScript અથવા SSJS તરીકે ઓળખવામાં આવે છે. પીડીએફ દસ્તાવેજો અને ડેસ્કટોપ એપ્લીકેશન્સ, મુખ્યત્વે વિજેટ્સ વગેરેમાં ઉપયોગ શોધવા માટે તેની લાગુ પડતી વેબની બહાર વિસ્તરે છે.
La JavaScript સિન્ટેક્સ C++ અને Java જેવી ભાષાઓને મળતું આવે છે, જો કે તે જાવામાંથી નામો અને સંમેલનો અપનાવે છે, તેથી તેનું નામ. પરંતુ, જેમ મેં પહેલા ઉલ્લેખ કર્યો છે તેમ, એ નોંધવું અગત્યનું છે કે, તેમના સમાન નામ હોવા છતાં, Java અને JavaScript ના અર્થશાસ્ત્ર અને હેતુઓ અલગ છે.
બીજી બાજુ, આપણે યાદ રાખવું જોઈએ કે JavaScript દસ્તાવેજ ઑબ્જેક્ટ મોડલ (DOM) ના અમલીકરણનો ઉપયોગ કરે છે, અને તે JS એ એકમાત્ર પ્રોગ્રામિંગ ભાષા છે જે બ્રાઉઝર મૂળ રીતે સમજે છે. શરૂઆતમાં, સર્વરની ઍક્સેસ વિના ક્લાયંટ પરની કામગીરી માટે તેનો ઉપયોગ HTML વેબ પૃષ્ઠોમાં થતો હતો. જો કે, આજે તેનો વ્યાપક ઉપયોગ સર્વર પરથી માહિતી મોકલવા અને પ્રાપ્ત કરવા માટે થાય છે, ઘણી વખત AJAX જેવી ટેક્નોલોજીઓ સાથે સંયોજનમાં. જાવાસ્ક્રિપ્ટનું અર્થઘટન વપરાશકર્તા એજન્ટમાં થાય છે જ્યારે નિવેદનો HTML કોડ સાથે ડાઉનલોડ થાય છે.
જેએસ એપ્લિકેશન્સ
JavaScript એ એક પ્રોગ્રામિંગ ભાષા છે જેનો વ્યાપકપણે વિવિધ એપ્લિકેશનો અને સંદર્ભોમાં ઉપયોગ થાય છે, જેમ કે:
- વેબ વિકાસ: વેબ ડેવલપમેન્ટમાં તે જરૂરી છે. તેનો ઉપયોગ વેબસાઇટ્સ અને વેબ એપ્લિકેશન્સ પર ક્રિયાપ્રતિક્રિયા અને વપરાશકર્તા અનુભવને સુધારવા માટે થાય છે. તેનો ઉપયોગ ઇન્ટરેક્ટિવ સ્વરૂપો, વિઝ્યુઅલ ઇફેક્ટ્સ, રીઅલ-ટાઇમ ડેટા માન્યતા અને ડાયનેમિક નેવિગેશનના નિર્માણમાં થાય છે. આમાં હાજર:
- વેબ ફ્રન્ટ-એન્ડ: તે ફ્રન્ટ એન્ડ ડેવલપમેન્ટનો પાયાનો પથ્થર છે. React, Angular અને Vue.js જેવા ફ્રેમવર્ક અને લાઇબ્રેરીઓ વેબ એપ્લિકેશન્સમાં ઇન્ટરેક્ટિવ અને ડાયનેમિક યુઝર ઇન્ટરફેસ બનાવવા માટે JavaScript પર આધાર રાખે છે.
- વેબ બેકએન્ડ: Node.js જેવા પ્લેટફોર્મ દ્વારા, JavaScript નો ઉપયોગ સર્વર બાજુ પર સંપૂર્ણ વેબ એપ્લિકેશન બનાવવા માટે થાય છે. આ વિકાસકર્તાને એપ્લિકેશનના ફ્રન્ટ-એન્ડ અને બેક-એન્ડ બંને પર JavaScriptનો ઉપયોગ કરવાની મંજૂરી આપે છે, જે ડેટાને સિંક્રનાઇઝ કરવાનું અને વાસ્તવિક સમયમાં એપ્લિકેશન બનાવવાનું સરળ બનાવે છે.
- સર્વર એપ્લિકેશન્સ: અન્ય સર્વર-સાઇડ ભાષાઓ જેટલી સામાન્ય ન હોવા છતાં, JavaScript નો ઉપયોગ સર્વર એપ્લિકેશન ડેવલપમેન્ટમાં Node.js દ્વારા થાય છે. આ ખાસ કરીને રીઅલ-ટાઇમ એપ્લિકેશન્સ અને એપ્લિકેશન્સ માટે ઉપયોગી છે જે મોટી સંખ્યામાં સહવર્તી વિનંતીઓનું સંચાલન કરે છે.
- મોબાઇલ એપ્લિકેશન્સ: તેનો ઉપયોગ રિએક્ટ નેટિવ અને આયોનિક જેવા ફ્રેમવર્કનો ઉપયોગ કરીને હાઇબ્રિડ મોબાઇલ એપ્લિકેશનના વિકાસમાં થાય છે. આ ફ્રેમવર્ક વિકાસકર્તાઓને એકવાર લખવા અને બહુવિધ પ્લેટફોર્મ્સ, જેમ કે iOS અને Android પર એપ્લિકેશન ચલાવવાની મંજૂરી આપે છે.
- ઑનલાઇન રમતો: તેનો ઉપયોગ ઑનલાઇન રમતો અને બ્રાઉઝર રમતોના વિકાસમાં થાય છે. Phaser અને Three.js જેવી લાઇબ્રેરીઓ બ્રાઉઝરમાં ઇન્ટરેક્ટિવ 2D અને 3D ગેમ્સ બનાવવાનું સરળ બનાવે છે.
- ડેસ્કટોપ એપ્લિકેશન્સ: ઇલેક્ટ્રોન જેવા ટૂલ્સ દ્વારા, HTML, CSS અને JavaScript જેવી વેબ ટેક્નોલોજીનો ઉપયોગ કરીને ક્રોસ-પ્લેટફોર્મ ડેસ્કટોપ એપ્લિકેશન્સ બનાવવાનું શક્ય છે.
- બ્રાઉઝર એક્સ્ટેન્શન્સ: વેબ બ્રાઉઝર્સમાં વધારાની કાર્યક્ષમતા ઉમેરવા માટે, એક્સ્ટેંશનનો ઉપયોગ કરવામાં આવે છે. આ એક્સ્ટેન્શન સામાન્ય રીતે JavaScript માં લખવામાં આવે છે.
- ઇન્ટરનેટ ઓફ થિંગ્સ (IoT) એપ્લિકેશન્સ: API અને વિશિષ્ટ પુસ્તકાલયો દ્વારા હાર્ડવેર અને સેન્સર્સ સાથે વાતચીત કરવાની ક્ષમતાને કારણે તેનો ઉપયોગ IoT ઉપકરણો માટે એપ્લિકેશન્સ અને સિસ્ટમો વિકસાવવા માટે થાય છે.
Redux શું છે અને તે કેવી રીતે કામ કરે છે?
Redux એ ઓપન સોર્સ JavaScript લાઇબ્રેરી છે જેનો ઉપયોગ એપ્લીકેશનમાં સ્ટેટ મેનેજ કરવા માટે થાય છે અને એલ્મ ફંક્શનલ લેંગ્વેજથી પ્રભાવિત થાય છે. વપરાશકર્તા ઇન્ટરફેસ બનાવવા માટે તે ઘણીવાર અન્ય લાઇબ્રેરીઓ જેમ કે પ્રતિક્રિયા અથવા કોણીય સાથે જોડવામાં આવે છે. તેની કલ્પના ડેન અબ્રામોવ અને એન્ડ્રુ ક્લાર્ક દ્વારા કરવામાં આવી હતી, જેઓ ફ્લક્સ નામની ફેસબુક લાઇબ્રેરીથી પ્રેરિત હતા.
સામાન્ય રીતે કહીએ તો, Redux એ એક નાની લાઇબ્રેરી છે સરળ અને મર્યાદિત API, એપ્લિકેશન સ્થિતિ માટે અનુમાનિત કન્ટેનર તરીકે કાર્ય કરવા માટે રચાયેલ છે. તેનું ઓપરેશન કાર્યાત્મક પ્રોગ્રામિંગમાં "ઘટાડો" ની વિભાવના જેવું જ છે.
Redux નો ઇતિહાસ પાછલો છે 2015, જ્યારે ડેન અબ્રામોવે રેડક્સનું પ્રથમ સંસ્કરણ વિકસાવવાનું શરૂ કર્યું હોટ રીલોડિંગ વિશે રિએક્ટ યુરોપ કોન્ફરન્સમાં ટોક આપવાની તૈયારી કરતી વખતે. આ પ્રક્રિયા દરમિયાન, અબ્રામોવે ફ્લક્સ પેટર્ન અને રીડ્યુસર ફંક્શન વચ્ચેની સમાનતા નોંધી. આ અવલોકનથી તેને આશ્ચર્ય થયું કે શું ફ્લક્સ સ્ટોર ખરેખર રીડ્યુસર ફંક્શન હોઈ શકે છે.
આ વિચારને અમલમાં મૂકવા માટે, અબ્રામોવે એન્ડ્રુ ક્લાર્કનો સંપર્ક કર્યો, જે ફ્લુમૉક્સ નામના ફ્લક્સ અમલીકરણના લેખક હતા. તેઓએ સાથે મળીને Redux ને જીવંત બનાવવા માટે સહયોગ કર્યો અને સુસંગત API ને વ્યાખ્યાયિત કર્યું. વધુમાં, તેઓએ ક્ષમતાનો અમલ કર્યો મિડલવેર અને સ્ટોર એન્હાન્સર્સનો ઉપયોગ કરીને એક્સ્ટેંશન, જેણે વર્તમાન રેડક્સ ઇકોસિસ્ટમમાં નોંધપાત્ર યોગદાન આપ્યું છે, તેની શક્યતાઓને વધુ વિસ્તૃત કરી છે.
રેડક્સ અને પ્રતિક્રિયા સંબંધ: પ્રતિક્રિયા શું છે
પ્રતિક્રિયા એ JavaScript લાઇબ્રેરી છે જે યુઝર ઈન્ટરફેસ બનાવવા પર ધ્યાન કેન્દ્રિત કરે છે, જો કે તેની વર્સેટિલિટી તે વ્યાખ્યાની બહાર જાય છે. આ ટૂલ, શરૂઆતમાં Facebook દ્વારા વિકસાવવામાં આવ્યું હતું, તે ઓપન સોર્સ છે અને સિંગલ પેજ વેબ એપ્લીકેશન્સ (SPA) અને એન્ડ્રોઈડ એપ્લીકેશન્સ સહિત વિવિધ એપ્લિકેશન્સમાં ઝડપથી યુઝર ઈન્ટરફેસ બનાવવાની ક્ષમતાને કારણે વ્યાપકપણે ઉપયોગમાં લેવાય છે.
અન્ય ફ્રેમવર્કથી વિપરીત, જેમ કે કોણીય, જે વધુ જટિલ અભિગમો પ્રદાન કરે છે, પ્રતિક્રિયા છે યુઝર ઇન્ટરફેસ જનરેટ કરવાની તેની ક્ષમતા માટે અલગ છે અસરકારક રીતે આ .jsx ફાઇલોના ઉપયોગ દ્વારા પ્રાપ્ત થાય છે, જે એક ફાઇલમાં તર્ક અને વપરાશકર્તા ઇન્ટરફેસને જોડે છે અને ઘટકો તરીકે ઓળખાતા એકમોમાં ગોઠવાય છે.
વર્ચ્યુઅલ DOM: તે શું છે?
જ્યારે આપણે ReactJS ની દુનિયામાં જઈએ છીએ, ત્યારે આપણે સંભવતઃ આના ખ્યાલ વિશે વારંવાર સાંભળીએ છીએ વર્ચ્યુઅલ DOM. આ વિચાર એક બુદ્ધિશાળી કલ્પનામાંથી ઉદ્દભવે છે: સમગ્ર વાસ્તવિક DOM અપડેટ કરવાને બદલે, અમે ફક્ત તે ભાગને સંશોધિત કરીએ છીએ જેને ખરેખર ફેરફારોની જરૂર છે. જૂની JavaScript એપ્લિકેશન્સમાં, અમે સર્વરમાંથી JSON ફોર્મેટમાં ડેટા મેળવતા હતા અને પછી રેન્ડર કરવા માટે સંપૂર્ણ નવું HTML જનરેટ કરતા હતા, પરિણામે દરેક ફેરફાર પર સમગ્ર પૃષ્ઠને તાજું કરવામાં આવે છે.
તમારા પ્રોજેક્ટમાં રેડક્સને કેવી રીતે ઇન્સ્ટોલ અને ગોઠવવું
જો તમારે જાણવું છે Redux કેવી રીતે ઇન્સ્ટોલ કરવુંસત્ય એ છે કે તે બિલકુલ જટિલ નથી. આ કરવા માટે તમારે ટર્મિનલ પર જવું પડશે અને ત્યાંથી તમારે નીચેનો આદેશ ચલાવવો પડશે:
npm i -S redux
હવે તમારી પાસે તમારી સિસ્ટમ પર Reduxનું સ્થિર સંસ્કરણ ઇન્સ્ટોલ કરેલું છે. અલબત્ત, તમારે સંભવતઃ કેટલીક નિર્ભરતાઓને ઉકેલવાની જરૂર પડશે, જેમ કે npm, Node.js પેકેજ મેનેજર, ઇન્સ્ટોલ કરવું. એકવાર આ થઈ જાય પછી, અમે હવે React ઇન્સ્ટોલ કરવા જઈ રહ્યા છીએ, જેનો તમારે Redux તેમજ વિકાસ સાધનોનો લાભ લેવાની પણ જરૂર પડશે જેથી તમે તમારા પ્રોજેક્ટ્સ બનાવવાનું શરૂ કરી શકો.
આ અન્ય પેકેજોને ઇન્સ્ટોલ કરવા માટે, તમારે જે આદેશો ચલાવવા જોઈએ તે છે:
npm i -S react-redux npm i -D redux-devtools
હવે તમારી પાસે બધું શરૂ કરવા માટે તૈયાર હશે. જો તમે મુખ્ય ફોલ્ડર અથવા ડિરેક્ટરીમાં જશો જ્યાં Redux ઇન્સ્ટોલ કરવામાં આવ્યું છે, તો તમે જોશો કે ત્યાં ઘણી બધી સબડિરેક્ટરીઝ અથવા સબફોલ્ડર્સ છે, જેમ કે STORE, REDUCERS, ACTIONS, TYPES. તમારે જાણવું જોઈએ કે દરેક શું છે:
- ક્રિયાઓ: આ એવા ઑબ્જેક્ટ્સ છે કે જેમાં બે ગુણધર્મો હોવા આવશ્યક છે, એક જે ક્રિયાના પ્રકાર (TYPE)નું વર્ણન કરે છે અને બીજું જે એપ્લિકેશનની સ્થિતિમાં શું બદલવું જોઈએ તેનું વર્ણન કરે છે.
- રેડ્યુસર્સ- રીડ્યુસર્સ એવા કાર્યો છે જે ક્રિયાઓના વર્તનને અમલમાં મૂકે છે. તેઓ ક્રિયાના વર્ણન અને રાજ્યના ફેરફારના વર્ણનના આધારે એપ્લિકેશનની સ્થિતિને બદલે છે.
- દુકાન: એ એવી જગ્યા છે જ્યાં ક્રિયાઓ અને રીડ્યુસર્સ મળે છે, એપની સ્થિતિ જાળવી રાખે છે અને બદલાય છે. એક જ છે.
- પ્રકારો: મેં પહેલા કહ્યું તેમ, તે ક્રિયાનો પ્રકાર છે.
વ્યવહારુ ઉદાહરણ: Redux સાથે એપ્લિકેશન બનાવવી
Un Redux નો ઉપયોગ કરીને ઉદાહરણ તે નીચેનું હોઈ શકે છે, જ્યાં Redux નો ઉપયોગ કરીને એક સરળ એકાઉન્ટિંગ એપ્લિકેશન બનાવવામાં આવે છે. પરંતુ આ કરવા માટે, તમારે પહેલા Redux ને રૂપરેખાંકિત કરવું જોઈએ અને તમારી ક્રિયાઓ અને રીડ્યુસર્સને વ્યાખ્યાયિત કરવું આવશ્યક છે:
// Redux લાઇબ્રેરીઓ આયાત કરો { createStore } 'redux' માંથી આયાત કરો; // ક્રિયાઓને વ્યાખ્યાયિત કરો const incrementAction = { પ્રકાર: 'INCREMENT' }; const decrementAction = { પ્રકાર: 'DECREMENT' }; // રીડ્યુસર કોન્સ્ટ કાઉન્ટરરેડ્યુસર = (સ્ટેટ = 0, એક્શન) => { સ્વિચ (એક્શન. પ્રકાર) { કેસ 'ઇન્ક્રીમેન્ટ': રીટર્ન સ્ટેટ + 1; કેસ 'ડિક્રીમેન્ટ': રીટર્ન સ્ટેટ - 1; ડિફૉલ્ટ: રીટર્ન સ્ટેટ; } }; // Redux સ્ટોર કોન્સ્ટ સ્ટોર બનાવો = createStore(counterReducer); // સ્ટોરમાં ફેરફારો માટે સબ્સ્ક્રાઇબ કરો store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // સ્ટેટ store.dispatch(incrementAction) ને સંશોધિત કરવા માટે ડિસ્પેચ ક્રિયાઓ; store.dispatch(incrementAction); store.dispatch(decrementAction);
Redux નો ઉપયોગ કેવી રીતે કરવો તેનું આ એક ખૂબ જ સરળ ઉદાહરણ છે. મોટી એપ્લિકેશનમાં, તમે વધુ જટિલ ક્રિયાઓ અને રીડ્યુસર્સને વ્યાખ્યાયિત કરશો અને સ્ટોરની સ્થિતિને ઍક્સેસ કરવા અને અપડેટ કરવા માટે પ્રતિક્રિયા ઘટકોને કનેક્ટ કરશો. પરંતુ ઓછામાં ઓછું આ તમને તે કેવી રીતે કાર્ય કરે છે તેનો ખ્યાલ આપે છે ...