પ્રતિક્રિયા રેડક્સ એપ્લિકેશન્સમાં અસિનક ઓપરેશન્સ            રીસેટ રેડક્સ એપ્લિકેશન્સમાં અસિનક ઓપરેશન્સસંબંધિત વિષયો: કાચો મીમલ્ટ

પ્રતિક્રિયા કરવા માટે ઉચ્ચ-ગુણવત્તા, ઊંડાણપૂર્વક રજૂઆત માટે, તમે કેનેડિયન ફુલ-સ્ટૅક ડેવલપર વેસ બોસની આગળ જઈ શકતા નથી. અહીં તેમના અભ્યાસક્રમનો પ્રયાસ કરો અને કોડ SITEPOINT મેળવવા માટે 25% બંધ અને સાઇટપૉઇન્ટને સપોર્ટ કરવામાં મદદ માટે ઉપયોગ કરો.

આ પોસ્ટ મૂળ કોડબ્રાહમામાં પોસ્ટ કરવામાં આવી હતી - imagenes modernas.

મીમલ્ટ સિંગલ-થ્રેડેડ પ્રોગ્રામિંગ લેંગ્વેજ છે. એટલે કે જ્યારે તમારી પાસે કંઈક આવું કોડ છે .

.પ્રથમ રેખા પૂર્ણ થઈ ન જાય ત્યાં સુધી બીજી લાઈન ચલાવવામાં નહીં આવે. સેમ્યુઅલ આ એક સમસ્યા નથી, કારણ કે લાખો ગણતરી ક્લાઈન્ટ અથવા સર્વર દ્વારા બીજામાં કરવામાં આવે છે. અમે ઇફેક્ટ્સની જાણ ત્યારે જ કરીએ છીએ જ્યારે અમે ખર્ચાળ ગણતરી (એક કાર્ય જે પૂર્ણ કરવા માટે નોંધપાત્ર સમય લે છે - એક નેટવર્ક વિનંતી જે પાછા ફરવા માટે થોડો સમય લે છે) કરી રહ્યા છીએ.

શા માટે હું ફક્ત એક API કોલ (નેટવર્ક વિનંતી) અહીં બતાવી હતી? અન્ય એએસઆઇસીસી ઓપરેશન્સ વિશે શું? અસિંક્રોનસ ઓપરેશનથી કેવી રીતે કામ કરવું તે વર્ણવવા માટે API કોલ એ ખૂબ સરળ અને ઉપયોગી ઉદાહરણ છે. અન્ય ઓપરેશન્સ છે, જેમ કે setTimeout , પ્રભાવ-ભારે ગણતરીઓ, છબી લોડિંગ અને કોઈપણ ઇવેન્ટ આધારિત ઑપરેશન્સ.

અમારી અરજીનું આયોજન કરતી વખતે, આપણે ધ્યાનમાં રાખવું જોઈએ કે કેવી રીતે અસુમેળ એક્ઝેક્યુશન સ્ટ્રકચરિંગ પર અસર કરે છે. ઉદાહરણ તરીકે, fetch બ્રાઉઝર દ્વારા API કોલ (નેટવર્ક વિનંતી) કરે તે કાર્ય તરીકે વિચારો. (જો તે એજેક્સની વિનંતી છે તો ભૂલી જાઓ.) વર્તનને લાગે છે કે પ્રકૃતિમાં અસુમેળ અથવા સિંક્રનસ છે.) જ્યારે સર્વર પર વિનંતી પર પ્રક્રિયા કરવામાં આવે છે ત્યારે મુખ્ય થ્રેડ પર થતું નથી. તો તમારો જેએસ કોડ અમલમાં મુકતો રહ્યો છે, અને વિનંતીને પ્રતિક્રિયા આપે તે પછી તે થ્રેડને અપડેટ કરશે.

આ કોડ સેમ્પલ:

     યુઝરઆઇડી = ફેચ (યુઝરએન્ડપોઇન્ટ); // વપરાશકર્તાએન્ડપાઇકમાંથી વપરાશકર્તા મેળવોuserDetails = fetch (userEndpoint, userId) // આ ચોક્કસ userId માટે મેળવો.     

આ કિસ્સામાં, ફેચ અસુમેળ છે, અમે userId કર્યા ન આવશે જ્યારે અમે આનયન userDetails પ્રયાસ કરો. તેથી આપણે તેને એવી રીતે ગોઠવીએ છીએ જે બીજી લાઈનની ખાતરી કરે છે કે જ્યારે પ્રથમ પ્રતિક્રિયા આપે છે.

નેટવર્ક વિનંતીઓના મોટાભાગનાં આધુનિક અમલીકરણો અસુમેળ છે. પરંતુ આ હંમેશા મદદ કરતું નથી, કારણ કે અમે અનુગામી API કૉલ્સ માટે અગાઉના API પ્રતિસાદ ડેટા પર આધાર રાખીએ છીએ. ચાલો જોઈએ કે આપણે તેને કેવી રીતે સેમેલ્ટ કાર્યક્રમોમાં ગોઠવી શકીએ.

યુમલ્ટ ઇન્ટરફેસ બનાવવા માટે ફ્રન્ટ-એન્ડ લાઇબ્રેરી છે. રેડક્સ એક રાજ્ય કન્ટેનર છે જે એપ્લિકેશનની સમગ્ર સ્થિતિને સંચાલિત કરી શકે છે. રેડક્સ સાથે મિશ્રણમાં સેમલ્ટ સાથે, અમે અસરકારક એપ્લિકેશનો બનાવી શકીએ છીએ જે સારી રીતે માપશે. આવી સેમ્યુઅલ એપ્લિકેશનમાં async ઓપરેશન્સને માળખું કરવાની ઘણી રીતો છે. દરેક પદ્ધતિ માટે, ચાલો આ પરિબળોના સંબંધમાં ગુણદોષ વિશે ચર્ચા કરીએ:

• કોડ સ્પષ્ટતા
• માપનીયતા
• ભૂલ નિયંત્રણમાં સરળતા.

દરેક પદ્ધતિ માટે, અમે આ બે API કૉલ્સ કરીશું:

1. લાવવું શહેર થી userDetails (પ્રથમ એપીઆઇ પ્રતિભાવ)

ચાલો ધારો કે એન્ડપોઇન્ટ / વિગતો . તેની પ્રતિક્રિયામાં શહેર હશે. પ્રતિક્રિયા એક ઑબ્જેક્ટ હશે:

     userDetails: {.શહેર: 'શહેર',.};    

2. વપરાશકર્તા શહેર પર આધાર રાખીને અમે શહેર માં તમામ રેસ્ટોરન્ટ્સ મેળવશો

ચાલો કહીએ છીએ એન્ડપોઇન્ટ / રિસ્ટર્સ /: શહેર . પ્રતિભાવ એરે હશે:

     ['restaurant1', 'restaurant2', . ]    

યાદ રાખો કે જ્યારે અમે પ્રથમ કરવાનું સમાપ્ત કરીએ છીએ ત્યારે જ બીજી વિનંતી કરી શકીએ છીએ (કારણ કે તે પ્રથમ વિનંતી પર આધાર રાખે છે).

ખાસ કરીને મેં ઉપરોક્ત પદ્ધતિઓ પસંદ કરી છે કારણ કે તે મોટા પાયે પ્રોજેક્ટ માટે સૌથી લોકપ્રિય છે. ત્યાં હજુ પણ અન્ય પદ્ધતિઓ છે જે ચોક્કસ કાર્યો માટે વધુ ચોક્કસ હોઈ શકે છે અને તે જટિલ એપ્લિકેશન માટે જરૂરી બધા લક્ષણો નથી ( redux-async, redux-promise, redux-async-queue ને નામ આપવા માટે થોડા).

વચનો

વચન એ એવી વસ્તુ છે જે ભવિષ્યમાં કોઈક સમયે એક જ મૂલ્ય ઉત્પન્ન કરી શકે છે: ક્યાંતો ઉકેલાયેલા મૂલ્ય, અથવા કોઈ કારણ કે તે ઉકેલાયો નથી (દા.ત., એક નેટવર્ક ભૂલ આવી છે). - એરિક ઇલિયટ

અમારા કિસ્સામાં, અમે ડેટા મેળવવા માટે અિઓિઓસ લાઇબ્રેરીનો ઉપયોગ કરીશું, જે જ્યારે નેટવર્કની વિનંતી કરે ત્યારે વચન પરત કરે છે. તે વચન, ઉકેલ લાવી શકે છે અને પ્રતિક્રિયા પાછો અથવા ભૂલ ફેંકી શકે છે તેથી, એક વખત રિએક્ટ કમ્પોનન્ટ માઉન્ટ કરે છે, અમે તરત આની જેમ લાવી શકીએ છીએ:

     ઘટકડિમાઉન્ટ    {અનોસીસ વિચાર ('/ વિગતો') // વપરાશકર્તા વિગતો મેળવો. પછી (પ્રતિભાવ = & gt; {const userCity = પ્રતિભાવ શહેરઅનોસીસ વિચાર (`/ રેસ્ટોરાં / $ {userCity}`). પછી (રેસ્ટોરન્ટ રીસપેન્સ = & gt; {આ. સેટસ્ટેટ ({યાદીઓપ્રશ્ન: રેસ્ટોરન્ટ રિસપેન્સ, // રાજ્યને સુયોજિત કરે છે})})})}    

આ રીતે, જ્યારે રાજ્યમાં ફેરફાર (ફૅચિંગના કારણે), કમ્પોનન્ટ આપમેળે રેસ્ટોરન્ટ્સની સૂચિ રેન્ડર અને લોડ કરશે.

Async / await એક નવું અમલીકરણ છે, જેની સાથે આપણે એંસીનક ઑપરેશન કરી શકીએ છીએ. ઉદાહરણ તરીકે, આ જ વસ્તુ પ્રાપ્ત કરી શકાય છે:

     async componentDidMount    {કોન્ટ રેસ્ટોરન્ટ રિસપેન્સ = રાહ જોવી વિચાર ('/ વિગતો') // વપરાશકર્તા વિગતો મેળવો. પછી (પ્રતિભાવ = & gt; {const userCity = પ્રતિભાવ શહેરઅનોસીસ વિચાર (`/ રેસ્ટોરાં / $ {userCity}`). પછી (રેસ્ટોરન્ટ રીસપેન્સ = & gt; રેસ્ટોરન્ટ રિસપેન્સ});આ. સેટસ્ટેટ ({રેસ્ટોરન્ટ રીસપેન્સ,});}    

આ બન્ને બધી પદ્ધતિઓ સૌથી સરળ છે. આખા તર્કનું મિશ્રણ ઘટકની અંદર છે, ઘટક લોડ થઈ જાય તે પછી અમે સરળતાથી તમામ ડેટા મેળવી શકીએ છીએ.

પદ્ધતિમાં ખામી

સમસ્યા એ હશે જ્યારે ડેટા પર આધારિત જટિલ ક્રિયાપ્રતિક્રિયાઓ કરવી. ઉદાહરણ તરીકે, નીચેના કેસોનો વિચાર કરો:

• અમે નેટવર્ક વિનંતી માટે બ્લોક કરવા જેએસ ચલાવવામાં આવી રહી છે જેમાં થ્રેડ નથી માંગતા
• ઉપરોક્ત તમામ કેસો કોડને ખૂબ જ જટિલ અને મુશ્કેલ જાળવી અને પરીક્ષણ કરશે.
• પણ, માપનીયતા એક મોટી સમસ્યા હશે, કારણ કે જો અમે એપ્લિકેશનના પ્રવાહને બદલવાની યોજના બનાવી રહ્યા છીએ, તો અમારે ઘટકમાંથી બધા fetches દૂર કરવાની જરૂર છે.
• કલ્પના કરો કે ઘટક પિતૃ બાળક વૃક્ષની ટોચ પર છે. પછી આપણે તમામ ડેટા આધારિત પ્રસ્તુતિગત ઘટકો બદલવાની જરૂર છે.
• નોંધવું પણ, સમગ્ર બિઝનેસ લોજિક ઘટકની અંદર છે.

આપણે અહીંથી કેવી રીતે સુધારી શકીએ?

1. રાજ્ય સંચાલન
આ કિસ્સાઓમાં, વૈશ્વિક સ્ટોરનો ઉપયોગ કરીને વાસ્તવમાં અમારી અડધા સમસ્યાઓ ઉકેલશે. અમે Redux નો ઉપયોગ અમારા વૈશ્વિક સ્ટોર તરીકે કરીશું.

2. સ્થળ સુધારવા માટે બિઝનેસ લોજિક ખસેડવું
જો આપણે આપણા વ્યવસાયના તર્કને ઘટકની બહાર ખસેડવાનો વિચાર કરીએ છીએ, તો પછી અમે તે ક્યાંથી કરી શકીએ? ક્રિયાઓ માં? રિડ્યુસર્સમાં? મિડલવેર દ્વારા? રેડક્સનું આર્કિટેક્ચર એવું છે કે તે પ્રકૃતિમાં સિંક્રનસ છે. આ ક્ષણે તમે કોઈ ક્રિયા (જેએસ ઓબ્જેક્ટ) રવાનગી આપો છો અને તે સ્ટોર પર પહોંચે છે, તે રીડુસ્ટર તેના પર કાર્ય કરે છે.

3. મીમલ્ટ ત્યાં એક અલગ થ્રેડ છે જ્યાં એસિસક કોડ ચલાવવામાં આવે છે અને ગ્લોબલ સ્ટેટમાં કોઈપણ ફેરફાર સબ્સ્ક્રિપ્શન

આમાંથી, આપણે એક વિચાર મેળવી શકીએ છીએ કે જો આપણે રીડુસ્ટર પહેલાં તમામ મેળાવડા તર્કને ખસેડી રહ્યા છીએ - જે કાં તો ક્રિયા અથવા મધ્યવર્તી છે - તો પછી સાચી ક્રિયા યોગ્ય સમયે રવાનગી કરવી શક્ય છે.
ઉદાહરણ તરીકે, એકવાર ફેંચ શરૂ થાય ત્યારે, અમે રવાનગી ({type: 'FETCH_STARTED'}) કરી શકીએ છીએ અને જ્યારે તે પૂર્ણ થાય ત્યારે અમે રવાનગી ({type: 'FETCH_SUCCESS'}) કરી શકીએ છીએ.તે મૂળભૂતરૂપે અમને ફંક્શન ને બદલે ઑબ્જેક્ટ્સ ને ક્રિયા તરીકે પરત કરવાની પરવાનગી આપે છે. આ કાર્ય માટે દલીલો તરીકે રવાનગી અને ગેટસ્ટેટ પ્રદાન કરીને સહાય કરે છે. અમે યોગ્ય સમય પર જરૂરી ક્રિયાઓ મોકલીને અસરકારક રીતે રવાનગીનો ઉપયોગ કરીએ છીએ. આ લાભો છે:

• વિધેયની અંદર બહુવિધ રવાનગીને મંજૂરી આપવી
• વ્યવસાયના તર્કશાસ્ત્રને લગતા લગાવવું એ ઘટકોનો પ્રતિક્રિયા અને ક્રિયાઓ પર ખસેડવામાં આવશે.

અમારા કિસ્સામાં, અમે આના જેવી ક્રિયા ફરીથી લખી શકીએ છીએ:

     નિકાસ કન્વર્ટ રેસ્ટર્ચ્યુટો =    = & gt; {વળતર (રવાનગી) = & gt; {રવાનગી (fetchStarted   ); // fetchStarted    એક ક્રિયા આપે છેફેચ ('/ વિગતો') પછી ((પ્રતિભાવ) = & gt; {રવાનગી (fetchUserDetailsSuccess   ); // fetchUserDetailsSuccess ક્રિયા આપે છેપ્રતિક્રિયા પરત;}) પછી (વિગતો => વિગતો શહેર.) પછી (શહેર = & gt; ફેચ ('/ રેસ્ટોરાં / શહેર')). પછી ((પ્રતિભાવ) = & gt; {રવાનગી (fetchRestaurantsSuccess (પ્રતિભાવ)) // fetchRestaurantsSuccess (પ્રતિસાદ) ડેટા સાથે ક્રિયા આપે છે}) પકડી (   = & gt; રવાનગી (fetchError   )); // fetchError    ભૂલ ઑબ્જેક્ટ સાથે ક્રિયા આપે છે};}    

જેમ તમે જોઈ શકો છો, આપણે હવે ક્યારે રવાનગી પર કડક નિયંત્રણ રાખીએ છીએ. દરેક ફંક્શન કોલની જેમ fetchStarted , fetchUserDetailsSuccess , fetchRestaurantsSuccess અને fetchError એક સાદા જાવાસ્ક્રિપ્ટ ઑબ્જેક્ટ રદ કરે છે પ્રકાર અને વધારાના વિગતો જો જરૂરી હોય તો તેથી હવે દરેક ક્રિયાને નિયંત્રિત કરવા અને દૃશ્યને અપડેટ કરવા માટે તે રીડુસર્સનું કાર્ય છે. મેં રીડુસ્ટર પર ચર્ચા કરી નથી, કારણ કે તે અહીંથી સીધી છે અને અમલીકરણ વિવિધ હોઈ શકે છે.

આ કામ કરવા માટે, આપણે રેડક્સ સાથે રિએક્ટ કમ્પોનન્ટને કનેક્ટ કરવાની જરૂર છે અને રેડક્સ લાઇબ્રેરીનો ઉપયોગ કરીને કમ્પોનન્ટ સાથે કાર્ય કરવાની જરૂર છે. એકવાર આ થઈ જાય, અમે ફક્ત આને કૉલ કરી શકીએ છીએ. પ્રોપ્સ getRestaurants , જે બદલામાં બધા ઉપરોક્ત કાર્યોને હેન્ડલ કરશે અને રીડુસ્ટર પર આધારિત દૃશ્યને અપડેટ કરશે.

તેના સ્કેલેબિલિટીના સંદર્ભમાં, ઍડ્સમાં રેડ્યુક્સ મિમોલ્ટનો ઉપયોગ કરી શકાય છે કે જે એસેન્ક ક્રિયાઓ પર જટિલ નિયંત્રણોનો સમાવેશ કરતા નથી. ઉપરાંત, તે અન્ય લાઈબ્રેરીઓ સાથે સીમલેસ રીતે કામ કરે છે, જેમ કે આગળના વિભાગના વિષયોમાં ચર્ચા.

પણ હજી પણ, રેડુક્સ મીમલ્ટનો ઉપયોગ કરીને અમુક કાર્યો કરવાનું મુશ્કેલ છે. ઉદાહરણ તરીકે, આપણે વચ્ચેના ફેચને રોકવાની જરૂર છે, અથવા જ્યારે આવા ઘણા કૉલ્સ હોય છે, અને ફક્ત નવીનતમ પરવાનગી આપો, અથવા જો કોઈ અન્ય API આ ડેટાને મેળવશે અને અમારે રદ કરવાની જરૂર છે

અમે હજુ પણ તે અમલ કરી શકીએ છીએ, પરંતુ તે બરાબર કરવું ખૂબ જટિલ છે. જટિલ ક્રિયાઓ માટે કોડ સ્પષ્ટતા અન્ય પુસ્તકાલયોની સરખામણીમાં ઓછી ગરીબ હશે, અને તેને જાળવી રાખવું મુશ્કેલ બનશે

રેડક્સ-સાગા

સેમલ્ડ મિડલવેરનો ઉપયોગ કરીને, અમે અતિરિક્ત લાભો મેળવી શકીએ છીએ જે ઉપરોક્ત તમામ કાર્યાલયોને હલ કરે છે. સેમ્યુઅલને ES6 જનરેટર પર આધારિત વિકસાવવામાં આવ્યું હતું.

સેમિટટ એક API પ્રદાન કરે છે જે નીચેની હાંસલ કરવામાં મદદ કરે છે:

• એવી ઘટનાઓને અવરોધિત કરવી જે થ્રેડને અવરોધિત કરે ત્યાં સુધી કંઈક પ્રાપ્ત થાય
• બિન-અવરોધિત ઇવેન્ટ્સ જે કોડ async
બનાવે છે
• બહુવિધ એંશીક વિનંતીઓ
વચ્ચે રેસ હેન્ડલિંગ
• અટકાવવા / થ્રોટલિંગ / કોઈ પણ કાર્યની શરૂઆત કરવી.

સાગ કેવી રીતે કામ કરે છે?

એસગસ ઓપરેશન્સને સરળ બનાવવા માટે સાગાસ ES6 જનરેટર અને એસેન્કોની રાહ જોતી API નો ઉપયોગ કરે છે. તે મૂળભૂત રીતે અલગ થ્રેડ પર તેનું કાર્ય કરે છે જ્યાં અમે બહુવિધ API કૉલ્સ કરી શકો છો. અમે ઉપયોગ કેસ પર આધાર રાખીને દરેક કોલ સિંક્રનસ અથવા અસુમેળ બનાવવા માટે તેમના API નો ઉપયોગ કરી શકો છો. API એ કાર્યો પૂરા પાડે છે જેના દ્વારા અમે થ્રેડને એ જ લાઇનમાં રાહ જોવી સુધી વિનંતીને પ્રતિસાદ આપી શકીએ. આમાંથી સેમ્યુઅલ, આ લાઇબ્રેરી દ્વારા પૂરા પાડવામાં આવેલ અન્ય ઘણી API છે, જે API ને વિનંતી કરે છે જે હેન્ડલ કરવા માટે ખૂબ સરળ છે. શહેર));// સફળતા પર રેસ્ટોરાં રવાનગીઉપજ આપવું ({પ્રકાર: 'FETCH_RESTAURANTS_SUCCESS',પેલોડ: {રેસ્ટોરાં},});} કેચ (ઈ) {// ભૂલ પર ભૂલ સંદેશ મોકલોઉપજ આપવું ({પ્રકાર: 'FETCH_RESTAURANTS_ERROR',પેલોડ: {ભૂલ સંદેશા: e,}});}}નિકાસ ડિફોલ્ટ કાર્ય * fetchRestaurantSagaMonitor {લેવ એવરી ('FETCH_RESTAURANTS', આનયન પ્રારંભિક); // દરેક આવી વિનંતી લે છે}

તેથી જો આપણે પ્રકાર FETCH_RESTAURANTS સાથે સરળ ક્રિયા મોકલો, સાગા મિડલવેર સાંભળશે અને પ્રતિસાદ આપશે. વાસ્તવમાં, ક્રિયાઓમાંથી કોઈએ મધ્યવર્લ્ડ દ્વારા ઉપયોગમાં લેવાતા નથી. તે ફક્ત સાંભળે છે અને કેટલાક વધારાના કાર્યો કરે છે અને જો જરૂરી હોય તો નવી ક્રિયા મોકલે છે. આ આર્કિટેક્ચરનો ઉપયોગ કરીને, અમે દરેક વર્ણનની વિનંતી કરી શકીએ છીએ

• જ્યારે પ્રથમ વિનંતી શરૂ
• જ્યારે પ્રથમ વિનંતી સમાપ્ત
• બીજી વિનંતીની શરૂઆત

.અને તેથી પર.

પણ, તમે fetchRestaurantsSaga ની સુંદરતા જોઈ શકો છો. બ્લોકીંગ કૉલ્સ અમલમાં મૂકવા માટે અમે હાલમાં કૉલ API નો ઉપયોગ કર્યો છે. સાગાસ અન્ય API પૂરી પાડે છે, જેમ કે ફોર્ક , જે નોન-અવરોધિત કોલ્સ અમલમાં મૂકે છે. અમે અમારા એપ્લિકેશનને બંધબેસતા માળખું જાળવવા માટે બ્લોકિંગ અને નૉનબ્લકિંગ કૉલ્સ બંનેને ભેગા કરી શકીએ છીએ.

માપનીયતાના સંદર્ભમાં, સાગનો ઉપયોગ ફાયદાકારક છે:

• આપણે કોઈ પણ ચોક્કસ કાર્યો પર આધારીત જૂથ બનાવી શકીએ છીએ. એક ક્રિયા ખાલી મોકલીને અમે એક સાગાને બીજાથી શરૂ કરી શકીએ છીએ.
• તે મિડલવેર હોવાથી, અમે જે ક્રિયાઓ લખીએ છીએ તે સાદા જેએસ ઓબ્જેક્ટો હશે, જે થંક્સથી વિપરીત હશે.
(5 9) આપણે સાગસમાં બિઝનેસ લોજિક ખસેડીએ છીએ (જે મધ્યમવર્ગીય છે), જો આપણે જાણીએ કે સાગાની કાર્યક્ષમતા શું હશે, તો પછી તેનો ભાગ સમજવું તે વધુ સરળ હશે.
• ભૂલોને સહેલાઈથી મોનીટર કરી શકાય છે અને સ્ટોરમાં પ્રયાસ / પકડ પદ્ધતિ દ્વારા મોકલવામાં આવે છે.

રેડક્સ-ઓબ્ઝર્વેબલ્સનો ઉપયોગ

"એક મહાકાવ્ય એ રેડક્સ-અવલોકનક્ષમના મૂળ આદિકાળ" હેઠળ તેમના દસ્તાવેજોમાં જણાવ્યા મુજબ:

1. એપિક એ કાર્ય છે જે ક્રિયાઓના પ્રવાહને લે છે અને ક્રિયાઓનો એક પ્રવાહ આપે છે. એટલે કે, એપિક એક સામાન્ય સેમિટલ રવાનગી ચેનલની સાથે ચાલે છે, જ્યારે રેડ્યુસર્સે તેમને પહેલાથી જ પ્રાપ્ત કર્યા છે.

2. મહાકાવ્યો તેમને પ્રાપ્ત પહેલાં સેમિટે હંમેશા તમારા રિડ્યુસર્સ દ્વારા ચલાવો. એપિક માત્ર ક્રિયાઓનો એક બીજો પ્રવાહ મેળવે છે અને આઉટપુટ કરે છે. આ રેડક્સ-સાગા જેવું જ છે, તેમાંથી મધ્યમવર્લ્ડ દ્વારા કોઈ પણ સેમેલ્ટનો ઉપયોગ થતો નથી. તે ફક્ત સાંભળે છે અને કેટલાક વધારાના કાર્યો કરે છે.

અમારા કાર્ય માટે, આપણે ફક્ત આ લખી શકીએ:

     કન્સ્ટ ફેચ યુઝર, વિગત = એક્શન $ = & gt; (ક્રિયા $ ofType ('FETCH_RESTAURANTS') સ્વીચમેપ (   = & gt;એજેક્સ getJSON ('/ વિગતો') નકશો (પ્રતિસાદ = & gt; પ્રતિભાવ. userDetails. શહેર). સ્વીચમેપ (   = & gt;એજેક્સ getJSON (`/ રેસ્ટોરાં / શહેર /`) નકશો (પ્રતિસાદ = & gt; ({પ્રકાર: 'FETCH_RESTAURANTS_SUCCESS', પેલોડ: પ્રતિક્રિયા. રેસ્ટોરન્ટ્સ})) // સફળતા પછી ડિસ્પોચિંગ). પકડી (ભૂલ = & gt; અસ્પષ્ટ. ({પ્રકાર: 'FETCH_USER_DETAILS_FAILURE', ભૂલ}))))    

સૌપ્રથમ, આમાં થોડું ગુંચવણભર્યું દેખાય છે. પરંતુ વધુ તમે RxJS સમજી, તે એપિક બનાવવા માટે સરળ છે

સાગના કિસ્સામાં, અમે API ક્રિયા શૃંખલાના કયા ભાગમાં થ્રેડ હાલમાં છે તેના પર વર્ણવતા દરેક ક્રિયાઓ મોકલી શકીએ છીએ.

માપનીયતાના સંદર્ભમાં, અમે ચોક્કસ ક્રિયાઓના આધારે એપિકક્સને વિભાજિત કરી અથવા ઍપિક્સનું કંપોઝ કરી શકીએ છીએ. તેથી આ લાઇબ્રેરી સ્કેલેબલ કાર્યક્રમો બનાવવા માટે મદદ કરી શકે છે. કોડની સ્પષ્ટતા સારી છે, જો આપણે લેખન કોડની મીમલ્ટ પેટર્ન સમજીએ.

મારી પસંદગીઓ

તમે કઈ લાઇબ્રેરીનો ઉપયોગ કરવા માગો છો?
તે અમારી API વિનંતીઓ કેવી રીતે જટિલ છે તેની પર આધારિત છે. બંને અલગ અલગ ખ્યાલો છે પરંતુ તેટલા જ સારા છે. હું તમને જોવા માંગું છું કે જે તમને શ્રેષ્ઠ શોર્ટ કરે છે.

તમે તમારા વ્યવસાયના લોજિકને APIs સાથે કેવી રીતે રાખશો?
પ્રાધાન્યમાં રિડ્યુસર પહેલાં, પરંતુ ઘટકમાં નહીં. શ્રેષ્ઠ માર્ગ મધ્યવર્તી હશે (સાગાસ અથવા નિરીક્ષણનો ઉપયોગ કરીને)

તમે કોડબ્રાહમા ખાતે વધુ પ્રતિક્રિયા વિકાસની પોસ્ટ્સ વાંચી શકો છો.

લેખક મળો

પ્રસન્ના મહેન્દ્રિર

પ્રસન્ના મહેન્દ્રિર કોડબ્રાહમામાં સોફ્ટવેર ડેવલપર છે. કોમ