ෆේස්බුක් ප්‍රවාහය හරහා Redux භාවිතා කරන්නේ ඇයි? [වසා ඇත]

මම මෙම පිළිතුර කියවා , බොයිලර් තහඩුව අඩු කර , GitHub උදාහරණ කිහිපයක් දෙස බැලුවෙමි.

මා තේරුම් ගත් පරිදි, සාම්ප්‍රදායික එම්වීසී ගෘහ නිර්මාණ ශිල්පයට සාපේක්ෂව නිල ප්‍රතිනිර්මාණ ලේඛණ අභිප්‍රේරණයන් වාසි ලබා දෙයි. නමුත් එය ප්‍රශ්නයට පිළිතුරක් සපයන්නේ නැත:

ඔබ ෆේස්බුක් ප්‍රවාහය හරහා Redux භාවිතා කළ යුත්තේ ඇයි?

එය ක්‍රමලේඛන ශෛලීන් පිළිබඳ ප්‍රශ්නයක් පමණක්ද: ක්‍රියාකාරී එදිරිව ක්‍රියාකාරී නොවනද? නැතහොත් ප්‍රශ්නය වන්නේ රීඩක්ස් ප්‍රවිෂ්ටයෙන් අනුගමනය කරන හැකියාවන් / ඩිව්-මෙවලම් වලද? සමහර විට පරිමාණය? නැත්නම් පරීක්ෂා කරනවාද?

ක්‍රියාකාරී භාෂාවලින් පැමිණෙන පුද්ගලයින් සඳහා රීඩැක්ස් ප්‍රවාහයක් යැයි මා පැවසුවහොත් මම හරිද?

මෙම ප්‍රශ්නයට පිළිතුරු සැපයීම සඳහා, ප්‍රවාහය එදිරිව ප්‍රතිනිර්මාණය කිරීමේ ක්‍රියාවලීන්හි සංකීර්ණතා සංසන්දනය කළ හැකිය.

නිල රීඩැක්ස් ඩොක් අභිප්‍රේරණයන්ගෙන් පෙළඹවීම් කරුණු මෙන්න :

1. ශුභවාදී යාවත්කාලීනයන් හැසිරවීම ( මා තේරුම් ගත් පරිදි, එය 5 වන කරුණ මත රඳා නොපවතී. ෆේස්බුක් ප්‍රවාහයෙන් එය ක්‍රියාත්මක කිරීම දුෂ්කර ද? )
2. සේවාදායකයේ විදැහුම්කරණය ( ෆේස්බුක් ප්‍රවාහයටද මෙය කළ හැකිය. නැවත පිරවීම හා සසඳන විට යම් ප්‍රතිලාභයක් තිබේද? )
3. මාර්ග සංක්‍රාන්ති සිදු කිරීමට පෙර දත්ත ලබා ගැනීම (ෆේස්බුක් ප්‍රවාහයෙන් එය සාක්ෂාත් කරගත නොහැක්කේ ඇයි? ප්‍රතිලාභ මොනවාද? )
4. උණුසුම් රීලෝඩ් ( ප්‍රතික්‍රියා උණුසුම් රීලෝඩ් සමඟ එය කළ හැකිය . අපට නැවත අවශ්‍ය වන්නේ ඇයි? )
5. ක්‍රියාකාරිත්වය අහෝසි කරන්න / නැවත කරන්න
6. වෙනත් කරුණු තිබේද? දිගටම පවතින තත්වය වගේ ...

Redux කතෘ මෙහි!

රෙඩක්ස් ෆ්ලක්ස් වලට වඩා වෙනස් නොවේ . සමස්තයක් ලෙස එය එකම ගෘහ නිර්මාණ ශිල්පයක් ඇත, නමුත් ෆ්ලක්ස් ඇමතුම් ආපසු ලියාපදිංචි කිරීම භාවිතා කරන ක්‍රියාකාරී සංයුතිය භාවිතා කරමින් සංකීර්ණ කොන් කිහිපයක් කපා ගැනීමට රෙඩක්ස් සමත් වේ.

රෙඩක්ස් හි මූලික වෙනසක් නොමැත, නමුත් එය සමහර වියුක්ත කිරීම් පහසු කරන බව හෝ අවම වශයෙන් ක්‍රියාත්මක කිරීමට හැකි නම් එය ෆ්ලක්ස් තුළ ක්‍රියාත්මක කිරීමට අපහසු හෝ කළ නොහැකි දෙයක් බව මට පෙනේ.

අඩුකිරීමේ සංයුතිය

නිදසුනක් ලෙස, පේජින් කිරීම ගන්න. මගේ Flux + React Router උදාහරණය pagination හසුරුවයි, නමුත් ඒ සඳහා වන කේතය භයානක ය. එය භයානක වීමට එක් හේතුවක් වන්නේ වෙළඳසැල් හරහා ක්‍රියාකාරීත්වය නැවත භාවිතා කිරීම ෆ්ලක්ස් අස්වාභාවික වීමයි. වෙළඳසැල් දෙකකට විවිධ ක්‍රියාවන්ට ප්‍රතිචාර වශයෙන් පේජින් හැසිරවීමට අවශ්‍ය නම්, ඒවාට පොදු බේස් වෙළඳසැලකින් උරුම විය යුතුය (නරකයි! ඔබ උරුමය භාවිතා කරන විට ඔබ යම් සැලසුමකට අගුලු දමා ඇත), නැතහොත් බාහිරින් අර්ථ දක්වා ඇති ශ්‍රිතයක් අමතන්න සිදුවීම් හසුරුවන්නා, එය කෙසේ හෝ ෆ්ලක්ස් වෙළඳසැලේ පුද්ගලික තත්වය මත ක්‍රියාත්මක වීමට අවශ්‍ය වනු ඇත. සියල්ලම අවුල් සහගතය (නිසැකවම හැකි තාක් දුරට වුවද).

අනෙක් අතට, Redux pagination සමඟ අඩු කරන්නාගේ සංයුතියට ස්වාභාවික ස්තූතිය. එය ඔබ ලිවීමට හැකි නිසා, සියලු ආකාරයෙන් බැස ෙරඩියුසර්ස් තියෙන්නේ පිගත ෙරඩියුසර්ස් ජනනය කරන reducer කර්මාන්ත හා පසුව ඔබගේ reducer ගසක එය භාවිතා . එය එතරම් පහසු වීමට ප්‍රධාන දෙය නම් ෆ්ලක්ස් හි වෙළඳසැල් පැතලි නමුත් රෙඩක්ස් හි ප්‍රතික්‍රියාකාරක කූඩු කළ හැකි ආකාරයටම අඩු කරන්නන්ට ක්‍රියාකාරී සංයුතිය හරහා කූඩු කළ හැකි බැවිනි.

මෙම රටාව මඟින් පරිශීලක කේත අහෝසි කිරීම / නැවත කිරීම වැනි අපූරු විශේෂාංග ද සක්‍රීය කරයි. ෆ්ලක්ස් යෙදුමකට අහෝසි කිරීම / නැවත කිරීම ප්ලග් කිරීම කේත පේළි දෙකක් යැයි ඔබට සිතාගත හැකිද? අමාරුයි. Redux සමඟ, එය අඩුකරන සංයුතියේ රටාවට ස්තුති වේ. මට ඒ ගැන අළුත් දෙයක් නැති බව ඉස්මතු කිරීමට අවශ්‍යයි - එල්ම් ගෘහ නිර්මාණ ශිල්පයේ පුරෝගාමී හා විස්තරාත්මකව විස්තර කර ඇති රටාව මෙයයි .

සේවාදායක විදැහුම්කරණය

මිනිසුන් සේවාදායකය ෆ්ලක්ස් සමඟ හොඳින් විදහා දක්වයි, නමුත් අප සතුව ෆ්ලක්ස් පුස්තකාල 20 ක් ඇති බව දැකීමෙන් එක් එක් සේවාදායකය විදැහුම්කරණය “පහසු” කිරීමට උත්සාහ කරයි, සමහර විට ෆ්ලක්ස් සේවාදායකයේ දළ දාර කිහිපයක් තිබේ. සත්යය නම් ෆේස්බුක් බොහෝ සේවාදායක විදැහුම්කරණය නොකරන බැවින් ඔවුන් ඒ ගැන එතරම් තැකීමක් කර නැති අතර එය පහසු කිරීම සඳහා පරිසර පද්ධතිය මත රඳා පවතී.

සාම්ප්‍රදායික ප්‍රවාහයේදී වෙළඳසැල් තනි බොත්තම් වේ. මෙයින් අදහස් කරන්නේ සේවාදායකයේ විවිධ ඉල්ලීම් සඳහා දත්ත වෙන් කිරීම දුෂ්කර බවයි. කළ නොහැකි, නමුත් දුෂ්කර ය. බොහෝ ෆ්ලක්ස් පුස්තකාල (නව ෆ්ලක්ස් යුටිල්ස් ) දැන් ඔබට යෝජනා කරන්නේ තනි බොත්තම් වෙනුවට පන්ති භාවිතා කරන ලෙසයි, එබැවින් ඔබට ඉල්ලීමකට ගබඩා ක්ෂණිකව කළ හැකිය.

ෆ්ලක්ස් හි ඔබ විසින් විසඳිය යුතු පහත සඳහන් ගැටළු තවමත් පවතී (ඔබ හෝ ඔබේ ප්‍රියතම ෆ්ලක්ස් පුස්තකාලයේ උපකාරය වන ෆ්ලූමොක්ස් හෝ ඇල්ට් වැනි ):

• වෙළඳසැල් පන්ති නම්, ඉල්ලීමකට පිටත් කර යැවීමෙන් මම ඒවා නිර්මාණය කර විනාශ කරන්නේ කෙසේද? මම වෙළඳසැල් ලියාපදිංචි කරන්නේ කවදාද?
• ගබඩාවලින් දත්ත හයිඩ්‍රේට් කර සේවාදායකයා මත නැවත විජලනය කරන්නේ කෙසේද? මේ සඳහා විශේෂ ක්‍රම ක්‍රියාත්මක කිරීමට මට අවශ්‍යද?

ෆ්ලක්ස් රාමු (වැනිලා ෆ්ලක්ස් නොවේ) මෙම ගැටලුවලට විසඳුම් ඇති බව පිළිගත යුතුය, නමුත් ඒවා සංකීර්ණ වී ඇති බව මට පෙනේ. උදාහරණයක් ලෙස, ක්රියාත්මක කිරීමට Flummox ඔබ අමතමින් serialize()සහ deserialize()ඔබේ ගබඩා . takeSnapshot()JSON ගසක ඔබේ තත්වය ස්වයංක්‍රීයව අනුක්‍රමිකව ලබා දීමෙන් Alt මෙම යහපත්කම විසඳයි .

Redux තව දුරටත් ඉදිරියට යයි: එක් ගබඩාවක් පමණක් ඇති බැවින් (බොහෝ අඩු කරන්නන් විසින් කළමනාකරණය කරනු ලැබේ), (නැවත) සජලනය කළමනාකරණය කිරීමට ඔබට විශේෂ API අවශ්‍ය නොවේ. ඔබට “ෆ්ලෂ්” හෝ “හයිඩ්‍රේට්” වෙළඳසැල් අවශ්‍ය නැත - ඇත්තේ එක් ගබඩාවක් පමණි, ඔබට එහි වර්තමාන තත්වය කියවිය හැකිය, නැතහොත් නව රාජ්‍යයක් සහිත නව වෙළඳසැලක් නිර්මාණය කළ හැකිය. සෑම ඉල්ලීමකටම වෙනම ගබඩා අවස්ථාවක් ලැබේ. Redux සමඟ සේවාදායක විදැහුම්කරණය පිළිබඳ වැඩිදුර කියවන්න.

නැවතත්, මෙය ෆ්ලක්ස් සහ රෙඩක්ස් යන දෙඅංශයෙන්ම කළ හැකි දෙයකි, නමුත් ෆ්ලක්ස් පුස්තකාල විසින් මෙම ගැටළුව විසඳන්නේ ටොන් ගණනක් ඒපීඅයි සහ සම්මුතීන් හඳුන්වා දීමෙනි, තවද රෙඩක්ස් හට එය විසඳීමට පවා අවශ්‍ය නැත. පළමු ස්ථානය සංකල්පීය සරලත්වයට ස්තූතියි.

සංවර්ධක අත්දැකීම්

රෙඩක්ස් ජනප්‍රිය ෆ්ලක්ස් පුස්තකාලයක් බවට පත්වීමට මම සැබවින්ම අදහස් නොකළෙමි time මම එය ලිව්වේ කාල චාරිකා සමඟ උණුසුම් රීලෝඩ් කිරීම පිළිබඳ මගේ ප්‍රතික්‍රියා යුරෝප් කතාවේ වැඩ කරමින් සිටියදීය . මට එක් ප්‍රධාන පරමාර්ථයක් තිබුණි: මැස්සන් මත අඩුකිරීමේ කේතය වෙනස් කිරීමට හෝ ක්‍රියාවන් ඉක්මවා යාමෙන් “අතීතය වෙනස් කිරීමට” ඉඩ දෙන්න, සහ රාජ්‍යය නැවත ගණනය කිරීම බලන්න.

මෙය කළ හැකි එක් ෆ්ලක්ස් පුස්තකාලයක් මා දැක නැත. උණුසුම් ලෝඩරය ප්‍රතික්‍රියා කිරීමෙන් ඔබට මෙය කිරීමට ඉඩ නොදේ fact ඇත්ත වශයෙන්ම ඔබ ෆ්ලක්ස් වෙළඳසැල් සංස්කරණය කරන්නේ නම් එය කැඩී යන්නේ ඒවා සමඟ කුමක් කළ යුතු දැයි නොදන්නා බැවිනි.

Redux අඩුකිරීමේ කේතය නැවත පූරණය කිරීමට අවශ්‍ය වූ විට, එය ඇමතෙන replaceReducer()අතර යෙදුම නව කේතය සමඟ ක්‍රියාත්මක වේ. ෆ්ලැක්ස් හි, දත්ත සහ කාර්යයන් ෆ්ලක්ස් වෙළඳසැල් වල පැටලී ඇති බැවින් ඔබට “කාර්යයන් ප්‍රතිස්ථාපනය කළ නොහැක”. එපමණක් නොව, ඔබට කෙසේ හෝ නව සංස්කරණ ඩිස්පචර් සමඟ නැවත ලියාපදිංචි කළ යුතුය Red රෙඩක්ස් සතුව නැති දෙයක්.

පරිසර පද්ධතිය

Redux සතුව පොහොසත් හා වේගයෙන් වර්ධනය වන පරිසර පද්ධතියක් ඇත. එයට හේතුව එය මිඩ්ල්වෙයාර් වැනි දිගු ලකුණු කිහිපයක් සපයන බැවිනි . එය සැලසුම් කර ඇත්තේ ල ging ු- සටහන් , පොරොන්දු සඳහා සහාය , නිරීක්ෂණ , මාර්ගගත කිරීම , වෙනස් කළ නොහැකි දේ චෙක්පත් , නොපසුබට උත්සාහය යනාදිය මනසේ තබාගෙන ය. මේ සියල්ල ප්‍රයෝජනවත් නොවන බව පෙනේ, නමුත් එකට වැඩ කිරීම සඳහා පහසුවෙන් ඒකාබද්ධ කළ හැකි මෙවලම් සමූහයකට ප්‍රවේශ වීම සතුටක්.

සරල බව

රෙඩක්ස් විසින් ෆ්ලැක්ස් හි සියලු ප්‍රතිලාභ ආරක්ෂා කරයි (ක්‍රියාවන් පටිගත කිරීම සහ නැවත ධාවනය කිරීම, ඒක දිශානුගත දත්ත ප්‍රවාහය, යැපෙන විකෘති) සහ ඩිස්පැචර් සහ ගබඩා ලියාපදිංචිය හඳුන්වා නොදී නව ප්‍රතිලාභ (පහසුවෙන් අහෝසි කිරීම, උණුසුම් නැවත පූරණය කිරීම) එකතු කරයි.

ඔබ සරල මට්ටමේ තබා ගැනීම වැදගත් වන්නේ ඔබ ඉහළ මට්ටමේ වියුක්තයන් ක්‍රියාත්මක කරන අතරම එය ඔබව සිහිබුද්ධියෙන් තබා ගන්නා බැවිනි.

බොහෝ ෆ්ලක්ස් පුස්තකාල මෙන් නොව, Redux API මතුපිට ඉතා කුඩාය. ඔබ සංවර්ධකයාගේ අනතුරු ඇඟවීම්, අදහස් සහ සනීපාරක්ෂක චෙක්පත් ඉවත් කළහොත් එය පේළි 99 කි. නිදොස් කිරීම සඳහා උපක්‍රමශීලී අසින්ක් කේතයක් නොමැත.

ඔබට එය සැබවින්ම කියවා සියලු Redux තේරුම් ගත හැකිය.

ෆ්ලක්ස් හා සසඳන විට රෙඩක්ස් භාවිතා කිරීමේ අවාසි පිළිබඳ මගේ පිළිතුර ද බලන්න .

Quora හි, කවුරුහරි මෙසේ කියයි :

පළමුවෙන්ම, ෆ්ලැක්ස් නොමැතිව ප්‍රතික්‍රියා සමඟ යෙදුම් ලිවීම මුළුමනින්ම කළ හැකිය.

දෙකම පිළිබඳ ඉක්මන් දැක්මක් පෙන්වීම සඳහා මා විසින් නිර්මාණය කරන ලද මෙම දෘශ්‍ය රූප සටහන , සම්පූර්ණ පැහැදිලි කිරීම කියවීමට අකමැති අයට ඉක්මන් පිළිතුරක් විය හැකිය:

නමුත් ඔබ තව දුරටත් දැන ගැනීමට කැමති නම්, කියවන්න.

මම විශ්වාස කරන්නේ ඔබ පිරිසිදු ප්‍රතික්‍රියා වලින් ආරම්භ කළ යුතු අතර පසුව Redux සහ Flux ඉගෙන ගන්න. ප්‍රතික්‍රියා සමඟ ඔබට යම් සැබෑ අත්දැකීමක් ලැබීමෙන් පසු, Redux ඔබට ප්‍රයෝජනවත්ද නැද්ද යන්න ඔබට පෙනෙනු ඇත.

Redux හරියටම ඔබේ යෙදුම සඳහා බව ඔබට හැඟෙනු ඇති අතර සමහර විට ඔබ සොයා ගනු ඇත, Redux ඔබ සැබවින්ම අත්විඳ නැති ගැටලුවක් විසඳීමට උත්සාහ කරන බව.

ඔබ කෙලින්ම Redux සමඟ ආරම්භ කරන්නේ නම්, ඔබට අධික ලෙස සැලසුම් කළ කේතයක්, නඩත්තු කිරීමට අපහසු කේතයක් සහ ඊටත් වඩා දෝෂ සහිතව සහ Redux නොමැතිව අවසන් විය හැකිය.

සිට රංගනයක් ලේඛන :

අභිප්රේරණය
ජාවාස්ක්‍රිප්ට් තනි පිටු යෙදුම් සඳහා වන අවශ්‍යතා වඩ වඩාත් සංකීර්ණ වී ඇති හෙයින්, අපගේ කේතය වෙන කවරදාටත් වඩා වැඩි රාජ්‍යයක් කළමනාකරණය කළ යුතුය. මෙම තත්වයට සේවාදායක ප්‍රතිචාර සහ හැඹිලි දත්ත මෙන්ම සේවාදායකයට තවමත් නොපවතින දේශීයව සාදන ලද දත්ත ඇතුළත් කළ හැකිය. සක්‍රීය මාර්ග, තෝරාගත් ටැබ්, දඟ පන්දු යවන්නන්, පේජින් පාලනය සහ යනාදිය කළමනාකරණය කිරීමට අපට අවශ්‍ය බැවින් UI තත්වයද සංකීර්ණතාවයෙන් වැඩි වේ.

දිනෙන් දින වෙනස් වන මෙම තත්වය කළමනාකරණය කිරීම දුෂ්කර ය. ආකෘතියකට වෙනත් ආකෘතියක් යාවත්කාලීන කළ හැකි නම්, දර්ශනයකට ආකෘතියක් යාවත්කාලීන කළ හැකි අතර එය තවත් ආකෘතියක් යාවත්කාලීන කරයි, මෙය අනෙක් දර්ශනය යාවත්කාලීන කිරීමට හේතු විය හැක. යම් වේලාවක, ඔබගේ යෙදුමේ තත්වය, වේලාව, ඇයි සහ කෙසේද යන්න පිළිබඳ පාලනය ඔබට අහිමි වී ඇති බැවින් ඔබට සිදුවන්නේ කුමක්ද යන්න ඔබට තවදුරටත් වැටහෙන්නේ නැත. පද්ධතියක් පාරදෘශ්‍ය හා නිර්ණායක නොවන විට, දෝෂ ප්‍රතිනිෂ්පාදනය කිරීම හෝ නව අංග එකතු කිරීම දුෂ්කර ය.

මෙය ප්‍රමාණවත් නොවූවාක් මෙන්, ඉදිරිපස නිෂ්පාදන සංවර්ධනයේ දී නව අවශ්‍යතා පොදු වීම සලකා බලන්න. සංවර්ධකයින් වශයෙන්, අපි සුභවාදී යාවත්කාලීන කිරීම්, සේවාදායක පාර්ශවීය විදැහුම්කරණය, මාර්ග සංක්‍රාන්ති සිදු කිරීමට පෙර දත්ත ලබා ගැනීම සහ යනාදිය හැසිරවීමට අපේක්ෂා කරමු. මීට පෙර කිසි දිනෙක අපට මුහුණ දීමට සිදු නොවූ සංකීර්ණතාවයක් කළමනාකරණය කිරීමට අප උත්සාහ කරන බව අපට පෙනී යන අතර, අපි අනිවාර්යයෙන්ම ප්‍රශ්නය අසන්නෙමු: එය අත්හැරීමට කාලයද? පිළිතුර නැත.

මිනිස් මනසට තර්කානුකූලව සිතීමට අපහසු වන සංකල්ප දෙකක් අප මිශ්‍ර කරන බැවින් මෙම සංකීර්ණතාව හැසිරවීමට අපහසුය: විකෘතිය සහ අසමමුහුර්තතාව. මම ඔවුන්ව හඳුන්වන්නේ මෙන්ටෝස් සහ කෝක් යනුවෙනි. වෙන් වූ විට දෙකම විශිෂ්ට විය හැකි නමුත් එකට එකතු වී අවුල් ජාලයක් ඇති කරයි. ප්‍රතික්‍රියා වැනි පුස්තකාල අසමමුහුර්තකරණය සහ සෘජු DOM හැසිරවීම ඉවත් කිරීමෙන් දර්ශන ස්ථරයේ මෙම ගැටළුව විසඳීමට උත්සාහ කරයි. කෙසේ වෙතත්, ඔබගේ දත්තවල තත්වය කළමනාකරණය කිරීම ඔබට ඉතිරිව ඇත. Redux පැමිණෙන්නේ මෙහිදීය.

ෆ්ලක්ස්, සීකියුආර්එස් සහ සිදුවීම් මූලාශ්‍රවල අඩිපාරේ යමින් රෙඩක්ස් යාවත්කාලීන කිරීම් සිදුවිය හැක්කේ කෙසේද සහ කවදාද යන්න පිළිබඳව යම් සීමාවන් පැනවීමෙන් රාජ්‍ය විකෘති පුරෝකථනය කිරීමට උත්සාහ කරයි. මෙම සීමාවන් Redux හි මූලධර්ම තුනෙන් පිළිබිඹු වේ.

ද සිට රංගනයක් ලේඛන :

මූලික සංකල්ප
Redux ඉතා සරල ය.

ඔබගේ යෙදුමේ තත්වය සරල වස්තුවක් ලෙස විස්තර කර ඇතැයි සිතන්න. උදාහරණයක් ලෙස, ටෝඩෝ යෙදුමක තත්වය මේ වගේ විය හැක:

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

මෙම වස්තුව "ආකෘතියක්" වැනි ය. මෙය එසේ වන්නේ කේතයේ විවිධ කොටස් වලට අත්තනෝමතික ලෙස තත්වය වෙනස් කළ නොහැකි වන අතර එමඟින් දෝෂ උත්පාදනය කිරීමට අපහසු වේ.

ප්රාන්තයේ යමක් වෙනස් කිරීම සඳහා, ඔබ ක්රියාවක් යැවිය යුතුය. ක්‍රියාව යනු සරල ජාවාස්ක්‍රිප්ට් වස්තුවකි (අප කිසිදු මැජික් එකක් හඳුන්වා නොදෙන ආකාරය සැලකිල්ලට ගන්න.) එය සිදු වූ දේ විස්තර කරයි. උදාහරණ ක්‍රියා කිහිපයක් මෙන්න:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

සෑම වෙනස්කමක්ම ක්‍රියාවක් ලෙස විස්තර කර ඇති බව බලාත්මක කිරීමෙන් යෙදුමේ සිදුවන්නේ කුමක්ද යන්න පිළිබඳ පැහැදිලි අවබෝධයක් අපට ලබා දේ. යමක් වෙනස් වූයේ නම්, එය වෙනස් වූයේ මන්දැයි අපි දනිමු. ක්‍රියාව සිදුවී ඇති දෙය යමඟ වැනි ය. අවසාන වශයෙන්, තත්වය සහ ක්‍රියා එකට සම්බන්ධ කිරීම සඳහා, අපි අඩු කරන්නෙකු ලෙස හැඳින්වෙන ශ්‍රිතයක් ලියන්නෙමු. නැවතත්, ඒ ගැන මැජික් කිසිවක් නැත - එය හුදෙක් ශ්‍රිතයක් වන අතර එය රාජ්‍යය සහ ක්‍රියාව තර්ක ලෙස ගෙන යෙදුමේ ඊළඟ තත්වය නැවත ලබා දෙයි. විශාල යෙදුමක් සඳහා එවැනි ශ්‍රිතයක් ලිවීම දුෂ්කර වනු ඇත, එබැවින් අපි රාජ්‍යයේ කොටස් කළමනාකරණය කරන කුඩා කාර්යයන් ලියන්නෙමු:

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

අනුරූපී රාජ්‍ය යතුරු සඳහා එම අඩු කරන්නන් දෙදෙනා අමතා අපගේ යෙදුමේ සම්පූර්ණ තත්වය කළමනාකරණය කරන තවත් අඩු කරන්නෙකු අපි ලියන්නෙමු:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

මෙය මූලික වශයෙන් Redux හි සමස්ත අදහසයි. අපි කිසිදු Redux API භාවිතා කර නොමැති බව සලකන්න. මෙම රටාවට පහසුකම් සැලසීම සඳහා එය උපයෝගීතා කිහිපයක් සමඟ එන නමුත් ප්‍රධාන අදහස නම් ක්‍රියාකාරී වස්තූන් වලට ප්‍රතිචාර වශයෙන් ඔබේ තත්වය කාලයාගේ ඇවෑමෙන් යාවත්කාලීන වන ආකාරය විස්තර කිරීම සහ ඔබ ලියන කේතයෙන් 90% ක් සරල ජාවාස්ක්‍රිප්ට් එකක් වන අතර රෙඩක්ස් භාවිතයෙන් තොරව එයම, එහි ඒපීඅයි හෝ ඕනෑම මැජික්.

ඔබ ඔහු රංගනයක් ලියන අවස්ථාව වන විට ඔහු බව සහ ඔවුන්ගේ වෘත්තීය දැමීම්, විවිධ නිර්මාණයන් සාකච්ඡා එහිදී දාන් Abramov මෙම පශ්චාත් කියවීම සමඟ ආරම්භ හොඳම විය හැකි: ස්රාව රාමුව පරිනාමය

දෙවනුව, ඔබ සම්බන්ධ කරන එම අභිප්‍රේරණ පිටුව ඇත්ත වශයෙන්ම රෙඩක්ස් හි අභිප්‍රේරණයන් ගැන සාකච්ඡා නොකරයි. මෙම ත්රී ප්රතිපත්ති තවමත් සම්මත ස්රාව ගෘහ නිර්මාණ ශිල්පය සිට ක්රියාත්මක කිරීම වෙනස්කම් සමග ගනුදෙනු කරන්නේ නැත නමුත් වැඩි රංගනයක් විශේෂිත වේ.

මූලික වශයෙන්, ෆ්ලක්ස් හි බහු ගබඩාවන් ඇත, ඒවා සංරචක සමඟ UI / API අන්තර්ක්‍රියා වලට ප්‍රතිචාර වශයෙන් රාජ්‍ය වෙනස ගණනය කරන අතර සංරචක වලට දායක විය හැකි සිදුවීම් ලෙස මෙම වෙනස්කම් විකාශනය කරයි. Redux හි, සෑම සංරචකයක්ම දායක වන එක් ගබඩාවක් පමණි. IMO හට අවම වශයෙන් රෙඩක්ස් දත්ත ප්‍රවාහය තවදුරටත් සරල කිරීම හා ඒකාබද්ධ කිරීම මගින් දැනේ (හෝ රෙඩක්ස් පවසන පරිදි අඩු කිරීම) දත්ත නැවත සං components ටක වෙත ගෙන ඒම - ෆ්ලක්ස් අවධානය යොමු කරන්නේ දත්ත ප්‍රවාහයේ අනෙක් පැත්ත එක්සත් කිරීම කෙරෙහි ය - බලන්න ආකෘතිය.

මම මුල් කාලීනව භාවිතා කරන්නෙකු වන අතර ෆේස්බුක් ෆ්ලක්ස් පුස්තකාලය භාවිතා කරමින් විශාල විශාල තනි පිටු යෙදුමක් ක්‍රියාත්මක කළෙමි.

මම සංවාදයට මඳක් ප්‍රමාද වී සිටින බැවින් මම පෙන්වා දෙන්නේ මගේ හොඳම බලාපොරොත්තු තිබියදීත් ෆේස්බුක් ඔවුන්ගේ ෆ්ලක්ස් ක්‍රියාත්මක කිරීම සංකල්පයේ සාක්ෂියක් ලෙස සලකන බවත් එය කිසි විටෙකත් ලැබිය යුතු අවධානයට ලක් නොවූ බවත්ය.

ෆ්ලක්ස් ගෘහ නිර්මාණ ශිල්පයේ අභ්‍යන්තර ක්‍රියාකාරිත්වය තරමක් අධ්‍යාපනික වන හෙයින් එය සමඟ සෙල්ලම් කිරීමට මම ඔබව උනන්දු කරවන්නෙමි, නමුත් ඒ සමඟම රෙඩක්ස් වැනි පුස්තකාල මගින් ලබා දෙන ප්‍රතිලාභ බොහොමයක් ලබා නොදේ (ඒවා නොවේ එය කුඩා ව්‍යාපෘති සඳහා වැදගත් වන නමුත් විශාල ව්‍යාපෘති සඳහා ඉතා වටිනා ඒවා බවට පත්වේ).

ඉදිරියට යාමට අපි රෙඩක්ස් වෙත යන බව අපි තීරණය කර ඇති අතර මම ඔබට යෝජනා කරන්නේ එයම කරන්න;)

රෙඩක්ස් ඕවර් ෆ්ලක්ස් පිළිබඳ සරල පැහැදිලි කිරීම මෙන්න. Redux සතුව ඩිස්පචර් නොමැත. එය රඳා පවතින්නේ අඩු කරන්නන් ලෙස හඳුන්වන පිරිසිදු කාර්යයන් මත ය. එයට පිටත් කරුවෙකු අවශ්‍ය නොවේ. එක් එක් ක්‍රියාව යාවත්කාලීන කරන්නන් සඳහා එක් හෝ වැඩි ගණනක් විසින් හසුරුවනු ලැබේ. දත්ත වෙනස් කළ නොහැකි බැවින්, අඩු කරන්නන් විසින් ගබඩාව යාවත්කාලීන කරන නව යාවත්කාලීන තත්වයක් ලබා දෙයි

වැඩි විස්තර සඳහා Flux vs Redux

මම ෆ්ලක්ස් සමඟ සෑහෙන කාලයක් වැඩ කළ අතර දැන් රෙඩක්ස් භාවිතා කරමින් සෑහෙන කාලයක් ගත කළෙමි. ඩෑන් පෙන්වා දුන් පරිදි ගෘහ නිර්මාණ දෙකම එතරම් වෙනස් නොවේ. කාරණය නම් රෙඩක්ස් විසින් දේවල් සරල හා පිරිසිදු කරයි. එය ඔබට ෆ්ලක්ස් මුදුනේ කරුණු කිහිපයක් උගන්වයි. උදාහරණයක් ලෙස ෆ්ලක්ස් යනු එක් දිශාවකින් යුත් දත්ත ප්‍රවාහයට කදිම නිදසුනකි. අප සතුව දත්ත ඇති ස්ථාන, එහි හැසිරවීම් සහ දර්ශන තට්ටුව වෙන් කිරීම. Redux හි අපට එකම දේ ඇති නමුත් වෙනස් කළ නොහැකි බව සහ පිරිසිදු කාර්යයන් ගැනද අපි ඉගෙන ගනිමු.

2018 මැද භාගයේ (අවුරුදු කිහිපයක්) ExtJS වෙතින් සංක්‍රමණය වන නව ප්‍රතික්‍රියා / ප්‍රතිනිර්මාණය කරන්නෙකුගෙන්:

රීඩැක්ස් ඉගෙනුම් වක්‍රය පසුපසට ලිස්සා යාමෙන් පසුව මට එකම ප්‍රශ්නයක් ඇති අතර පිරිසිදු ප්‍රවාහය OP මෙන් සරල වනු ඇතැයි සිතුවෙමි.

ඉහත පිළිතුරු වල සඳහන් කර ඇති පරිදි ප්‍රවාහයට වඩා රීඩැක්ස් වල ප්‍රතිලාභ මම ඉක්මනින් දුටුවෙමි, එය මගේ පළමු යෙදුමට වැඩ කරමින් සිටියෙමි.

නැවත බොයිලේරු තහඩුව මත ග්‍රහණයක් ලබා ගනිමින් සිටියදී, මම වෙනත් රාජ්‍ය කළමනාකරණ ලිබ් කිහිපයක් අත්හදා බැලුවෙමි , මට හමු වූ හොඳම දේ නැවත ගැලපීමයි .

එය බොහෝ පසුව වැනිලා රංගනයක් වඩා ප්රතිභානයෙන්, එය කප්පාදු ගිනි උදුනක් හා සැපයුම අත්හිටුවන 90% ක් පෙන්වා මම රංගනයක් වෙනුවෙන් වැය කරන අවස්ථාව වන (මම පුස්තකාලයක් කරන්නේ කළ යුතු හිතන්නේ දෙයක්) 75% ක්, මම කිහිපයක් ව්යාපාර යෙදුම් ලබා ගැනීමට සමත් විය වහාම යනවා.

එය එකම රීඩක්ස් මෙවලම් සමඟ ද ක්‍රියාත්මක වේ. මෙය හොඳ ප්‍රතිලාභයක් වන හොඳ ලිපියකි .

එබැවින් මෙම SO තනතුරට "සරල ප්‍රතිනිර්මාණය" සෙවීම සඳහා පැමිණි වෙනත් ඕනෑම අයෙකුට, සියලු ප්‍රතිලාභ සහ බොයිලර් තහඩුවෙන් 1/4 ක් සමඟ නැවත පිරිපහදු කිරීම සඳහා සරල විකල්පයක් ලෙස උත්සාහ කිරීමට මම නිර්දේශ කරමි.

මෙම ලිපියට අනුව: https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

Redux නොව වඩා හොඳ කාර්ය සාධනයක් ලබා ගැනීම සඳහා ඔබේ යෙදුමේ දත්ත කළමනාකරණය කිරීමට ඔබ MobX භාවිතා කිරීම වඩා හොඳය.