Redux என்றால் என்ன: இந்த நூலகத்தைப் பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தும்

உங்களுக்கு இன்னும் தெரியாவிட்டால் Redux என்றால் என்ன, இந்தக் கட்டுரையில் இந்த நூலகத்தைப் பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் விளக்குவதில் கவனம் செலுத்தப் போகிறோம் ஜாவா, அத்துடன் அதன் பயன்பாடுகள், அதை எவ்வாறு பயன்படுத்தலாம், போன்றவை. இந்த வழியில், உங்கள் அடுத்த JS திட்டங்களில் அதை ஒருங்கிணைக்க தேவையான அனைத்து கருவிகளும் உங்களிடம் இருக்கும்.

Redux எப்படி இருக்கிறது என்று பார்ப்போம்!

ஜாவாஸ்கிரிப்ட் என்றால் என்ன?

ஜாவாஸ்கிரிப்ட் (JS), ஒரு விளக்கப்பட்ட நிரலாக்க மொழி. இது ECMAScript தரநிலையின் பேச்சுவழக்காகக் கருதப்படுகிறது மற்றும் பொருள் சார்ந்த, முன்மாதிரி அடிப்படையிலான, கட்டாயம், பலவீனமாக தட்டச்சு செய்த மற்றும் மாறும் தன்மை கொண்டது. அதன் பெயர் இருந்தபோதிலும், இது ஜாவாவுடன் குழப்பமடையக்கூடாது. நெட்ஸ்கேப் நேவிகேட்டர் (லைவ்ஸ்கிரிப்ட் உருவாக்கியவர்) மூலம் சன் மைக்ரோசிஸ்டம்ஸ் (ஜாவாவை உருவாக்கியவர்) கையகப்படுத்தப்பட்டது மற்றும் நிரலாக்க மொழியின் பெயர் மாற்றத்தைத் தொடர்ந்து அதன் உருவாக்கம் வணிகரீதியான கருத்தாக்கங்களை அடிப்படையாகக் கொண்டது.

முக்கியமாக வாடிக்கையாளர் பக்கத்தில் பயன்படுத்தப்படுகிறது, இணைய உலாவிகளின் ஒருங்கிணைந்த பகுதியாக உருவாக்குகிறது. இது பயனர் இடைமுகத்தை மேம்படுத்தவும், மாறும் வலைப்பக்கங்களை உருவாக்கவும் உங்களை அனுமதிக்கிறது. கூடுதலாக, ஜாவாஸ்கிரிப்டை சர்வர் பக்கத்தில் பயன்படுத்தலாம், இது சர்வர்-சைட் ஜாவாஸ்கிரிப்ட் அல்லது எஸ்எஸ்ஜேஎஸ் என அழைக்கப்படுகிறது. PDF ஆவணங்கள் மற்றும் டெஸ்க்டாப் பயன்பாடுகள், முக்கியமாக விட்ஜெட்டுகள் போன்றவற்றில் பயன்படுத்துவதைக் கண்டறிந்து, அதன் பொருந்தக்கூடிய தன்மை இணையத்திற்கு அப்பால் நீண்டுள்ளது.

La ஜாவாஸ்கிரிப்ட் தொடரியல் C++ மற்றும் ஜாவா போன்ற மொழிகளை ஒத்திருக்கிறது, இது ஜாவாவிலிருந்து பெயர்கள் மற்றும் மரபுகளை ஏற்றுக்கொண்டாலும், அதன் பெயர். ஆனால், நான் முன்பு குறிப்பிட்டது போல், ஜாவா மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவை ஒரே மாதிரியான பெயர் இருந்தபோதிலும், வெவ்வேறு சொற்பொருள் மற்றும் நோக்கங்களைக் கொண்டுள்ளன என்பதைக் கவனத்தில் கொள்ள வேண்டும்.

மறுபுறம், ஜாவாஸ்கிரிப்ட் ஆவணப் பொருள் மாதிரியின் (DOM) செயல்படுத்தலைப் பயன்படுத்துகிறது என்பதை நாம் நினைவில் கொள்ள வேண்டும். ஜேஎஸ் என்பது உலாவிகள் சொந்தமாகப் புரிந்துகொள்ளும் ஒரே நிரலாக்க மொழியாகும். ஆரம்பத்தில், இது HTML வலைப்பக்கங்களில் சேவையகத்தை அணுகாமல் கிளையண்டில் செயல்பட பயன்படுத்தப்பட்டது. இருப்பினும், இன்று இது சர்வரிலிருந்து தகவல்களை அனுப்பவும் பெறவும் பரவலாகப் பயன்படுத்தப்படுகிறது, பெரும்பாலும் AJAX போன்ற தொழில்நுட்பங்களுடன் இணைந்து. HTML குறியீட்டுடன் அறிக்கைகள் பதிவிறக்கப்படும் போது JavaScript பயனர் முகவரில் விளக்கப்படுகிறது.

JS பயன்பாடுகள்

ஜாவாஸ்கிரிப்ட் என்பது பல்வேறு பயன்பாடுகள் மற்றும் சூழல்களில் பரவலாகப் பயன்படுத்தப்படும் ஒரு நிரலாக்க மொழியாகும்:

• இணைய மேம்பாடு: இணைய வளர்ச்சியில் இது அவசியம். இணையத்தளங்கள் மற்றும் இணையப் பயன்பாடுகளில் ஊடாடுதல் மற்றும் பயனர் அனுபவத்தை மேம்படுத்த இது பயன்படுகிறது. ஊடாடும் படிவங்கள், காட்சி விளைவுகள், நிகழ்நேர தரவு சரிபார்த்தல் மற்றும் டைனமிக் வழிசெலுத்தல் போன்றவற்றில் இது பயன்படுத்தப்படுகிறது. தற்போது:
  • இணைய முன்-இறுதி: இது முன்-இறுதி வளர்ச்சியின் மூலக்கல்லாகும். வலைப் பயன்பாடுகளில் ஊடாடும் மற்றும் மாறும் பயனர் இடைமுகங்களை உருவாக்க, React, Angular மற்றும் Vue.js போன்ற கட்டமைப்புகள் மற்றும் நூலகங்கள் JavaScript ஐ நம்பியுள்ளன.
  • இணைய பின்தளம்: Node.js போன்ற இயங்குதளங்கள் மூலம், முழுமையான இணைய பயன்பாடுகளை உருவாக்க, சர்வர் பக்கத்தில் JavaScript பயன்படுத்தப்படுகிறது. இது டெவலப்பர் ஒரு பயன்பாட்டின் முன்-இறுதி மற்றும் பின்-இறுதியில் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த அனுமதிக்கிறது, இது தரவை ஒத்திசைப்பதையும் உண்மையான நேரத்தில் பயன்பாடுகளை உருவாக்குவதையும் எளிதாக்குகிறது.
  • சேவையக பயன்பாடுகள்: மற்ற சர்வர் பக்க மொழிகள் போல் பொதுவானதாக இல்லாவிட்டாலும், Node.js மூலம் சர்வர் பயன்பாட்டு மேம்பாட்டில் ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படுகிறது. நிகழ்நேர பயன்பாடுகள் மற்றும் அதிக எண்ணிக்கையிலான ஒரே நேரத்தில் கோரிக்கைகளைக் கையாளும் பயன்பாடுகளுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும்.
• மொபைல் பயன்பாடுகள்: ரியாக்ட் நேட்டிவ் மற்றும் அயோனிக் போன்ற கட்டமைப்புகளைப் பயன்படுத்தி கலப்பின மொபைல் பயன்பாடுகளின் வளர்ச்சியில் இது பயன்படுத்தப்படுகிறது. இந்த கட்டமைப்புகள் டெவலப்பர்களை ஒருமுறை எழுதவும், iOS மற்றும் Android போன்ற பல தளங்களில் பயன்பாட்டை இயக்கவும் அனுமதிக்கின்றன.
• ஆன்லைன் விளையாட்டுகள்: இது ஆன்லைன் கேம்கள் மற்றும் உலாவி கேம்களின் வளர்ச்சியில் பயன்படுத்தப்படுகிறது. Phaser மற்றும் Three.js போன்ற நூலகங்கள் உலாவியில் ஊடாடும் 2D மற்றும் 3D கேம்களை உருவாக்குவதை எளிதாக்குகின்றன.
• டெஸ்க்டாப் பயன்பாடுகள்: எலக்ட்ரான் போன்ற கருவிகள் மூலம், HTML, CSS மற்றும் JavaScript போன்ற இணைய தொழில்நுட்பங்களைப் பயன்படுத்தி குறுக்கு-தளம் டெஸ்க்டாப் பயன்பாடுகளை உருவாக்க முடியும்.
• உலாவி நீட்டிப்புகள்: இணைய உலாவிகளில் கூடுதல் செயல்பாட்டைச் சேர்க்க, நீட்டிப்புகள் பயன்படுத்தப்படுகின்றன. இந்த நீட்டிப்புகள் பொதுவாக ஜாவாஸ்கிரிப்ட்டில் எழுதப்படுகின்றன.
• இன்டர்நெட் ஆஃப் திங்ஸ் (IoT) பயன்பாடுகள்: ஏபிஐகள் மற்றும் சிறப்பு நூலகங்கள் மூலம் ஹார்டுவேர் மற்றும் சென்சார்களுடன் தொடர்பு கொள்ளும் திறனின் காரணமாக, ஐஓடி சாதனங்களுக்கான பயன்பாடுகள் மற்றும் அமைப்புகளை உருவாக்குவதில் இது பயன்படுத்தப்படுகிறது.

Redux என்றால் என்ன, அது எப்படி வேலை செய்கிறது?

Redux ஒரு திறந்த மூல ஜாவாஸ்கிரிப்ட் நூலகம் இது பயன்பாடுகளில் மாநிலத்தை நிர்வகிக்கப் பயன்படுகிறது மற்றும் எல்ம் செயல்பாட்டு மொழியால் பாதிக்கப்படுகிறது. பயனர் இடைமுகங்களை உருவாக்க இது பெரும்பாலும் எதிர்வினை அல்லது கோணம் போன்ற பிற நூலகங்களுடன் இணைக்கப்படுகிறது. இது ஃப்ளக்ஸ் என்ற பேஸ்புக் நூலகத்தால் ஈர்க்கப்பட்ட டான் அப்ரமோவ் மற்றும் ஆண்ட்ரூ கிளார்க் ஆகியோரால் உருவானது.

பொதுவாக, Redux என்பது ஒரு சிறிய நூலகமாகும் எளிய மற்றும் வரையறுக்கப்பட்ட API, பயன்பாட்டு நிலைக்கு யூகிக்கக்கூடிய கொள்கலனாக செயல்பட வடிவமைக்கப்பட்டுள்ளது. அதன் செயல்பாடு செயல்பாட்டு நிரலாக்கத்தில் "குறைத்தல்" என்ற கருத்தை ஒத்ததாகும்.

Redux இன் வரலாறு பழையது 2015, டான் அப்ரமோவ் Redux இன் முதல் பதிப்பை உருவாக்கத் தொடங்கினார் ஹாட் ரீலோடிங் பற்றி ரியாக்ட் ஐரோப்பா மாநாட்டில் ஒரு பேச்சு கொடுக்க தயாராகும் போது. இந்தச் செயல்பாட்டின் போது, ​​அப்ரமோவ் ஃப்ளக்ஸ் முறைக்கும் குறைப்பான் செயல்பாட்டிற்கும் இடையே உள்ள ஒற்றுமையைக் கவனித்தார். இந்தக் கவனிப்பு, ஒரு ஃப்ளக்ஸ் ஸ்டோர் உண்மையில் ஒரு குறைப்பான் செயல்பாடாக இருக்க முடியுமா என்று அவரை ஆச்சரியப்படுத்தியது.

இந்த யோசனையைச் செயல்படுத்த, அப்ரமோவ் ஆண்ட்ரூ கிளார்க்கைத் தொடர்பு கொண்டார், அவர் Flummox எனப்படும் ஃப்ளக்ஸ் செயல்படுத்தலின் ஆசிரியராக இருந்தார். அவர்கள் ஒன்றாக இணைந்து Redux ஐ உயிர்ப்பிக்க மற்றும் ஒரு ஒத்திசைவான API ஐ வரையறுத்தனர். கூடுதலாக, அவர்கள் திறனை செயல்படுத்தினர் மிடில்வேர் மற்றும் ஸ்டோர் மேம்பாட்டாளர்களைப் பயன்படுத்தி நீட்டிப்பு, இது தற்போதைய Redux சுற்றுச்சூழல் அமைப்பில் குறிப்பிடத்தக்க பங்களிப்பை அளித்தது, மேலும் அதன் சாத்தியங்களை விரிவுபடுத்துகிறது.

Redux மற்றும் React உறவு: எதிர்வினை என்றால் என்ன

ரியாக்ட் என்பது ஜாவாஸ்கிரிப்ட் நூலகம் பயனர் இடைமுகங்களை உருவாக்குவதில் கவனம் செலுத்துகிறது, இருப்பினும் அதன் பல்துறை அந்த வரையறைக்கு அப்பாற்பட்டது. இந்த கருவி, ஆரம்பத்தில் Facebook ஆல் உருவாக்கப்பட்டது, இது திறந்த மூலமாகும் மற்றும் ஒரு பக்க இணைய பயன்பாடுகள் (SPA) மற்றும் Android பயன்பாடுகள் மற்றும் iOS உட்பட பல்வேறு பயன்பாடுகளில் பயனர் இடைமுகங்களை விரைவாக உருவாக்கும் திறன் காரணமாக பரவலாகப் பயன்படுத்தப்படுகிறது.

மிகவும் சிக்கலான அணுகுமுறைகளை வழங்கும் கோணம் போன்ற பிற கட்டமைப்புகளைப் போலல்லாமல், ரியாக்ட் ஆகும் பயனர் இடைமுகங்களை உருவாக்கும் திறனுக்காக தனித்து நிற்கிறது திறமையாக. .jsx கோப்புகளைப் பயன்படுத்துவதன் மூலம் இது அடையப்படுகிறது, இது தர்க்கம் மற்றும் பயனர் இடைமுகத்தை ஒரு கோப்பில் இணைக்கிறது மற்றும் கூறுகள் எனப்படும் அலகுகளாக ஒழுங்கமைக்கப்படுகிறது.

மெய்நிகர் DOM: அது என்ன?

ரியாக்ட்ஜேஎஸ் உலகத்தை நாம் ஆராயும்போது, ​​அதன் கருத்தைப் பற்றி அடிக்கடி கேள்விப்படுகிறோம் மெய்நிகர் DOM. இந்த யோசனை ஒரு புத்திசாலித்தனமான கருத்தில் இருந்து உருவானது: முழு உண்மையான DOM ஐ புதுப்பிப்பதற்கு பதிலாக, உண்மையில் மாற்றங்கள் தேவைப்படும் பகுதியை மட்டுமே மாற்றுவோம். பழைய ஜாவாஸ்கிரிப்ட் பயன்பாடுகளில், சேவையகத்திலிருந்து JSON வடிவத்தில் தரவைப் பெறுவோம், பின்னர் ரெண்டர் செய்ய முழுமையான புதிய HTML ஐ உருவாக்குவோம், இதன் விளைவாக ஒவ்வொரு மாற்றத்திலும் முழுப் பக்கமும் புதுப்பிக்கப்படும்.

உங்கள் திட்டத்தில் Redux ஐ எவ்வாறு நிறுவுவது மற்றும் கட்டமைப்பது

நீங்கள் தெரிந்து கொள்ள விரும்பினால் 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 நூலகங்களை இறக்குமதி செய் 'redux' இலிருந்து { createStore }; // செயல்களை வரையறுக்கவும் incrementAction = {வகை: 'அதிகரிப்பு'}; const decrementAction = {வகை: 'DECREMENT'}; // குறைப்பானை வரையறுக்கவும் const counterReducer = (நிலை = 0, செயல்) => {சுவிட்ச் (action.type) {case 'INCREMENT': return state + 1; வழக்கு 'DECREMENT': திரும்பும் நிலை - 1; இயல்புநிலை: திரும்பும் நிலை; } }; // Redux store const store ஐ உருவாக்கவும் = createStore(counterReducer); // store store.subscribe(() => {console.log('தற்போதைய எதிர் நிலை:', store.getState());}); // மாநில store.dispatch (incrementAction) ஐ மாற்றுவதற்கான செயல்களை அனுப்பவும்; store.dispatch(incrementAction); store.dispatch(decrementAction);

Redux ஐ எவ்வாறு பயன்படுத்துவது என்பதற்கு இது ஒரு மிக எளிய உதாரணம். ஒரு பெரிய பயன்பாட்டில், நீங்கள் மிகவும் சிக்கலான செயல்கள் மற்றும் குறைப்பான்களை வரையறுத்து, கடையின் நிலையை அணுகவும் புதுப்பிக்கவும் ரியாக்ட் கூறுகளை இணைப்பீர்கள். ஆனால் குறைந்த பட்சம் இது எவ்வாறு இயங்குகிறது என்பது பற்றிய ஒரு யோசனையை இது உங்களுக்கு வழங்குகிறது.