Back to Question Center
0

રીડક્ટ, રેડક્સ અને ફેધર્સજેએસ દ્વારા સીઆરડીડી એપ્લિકેશન બનાવો            પ્રતિક્રિયા, રેડક્સ અને પીછાઓનો ઉપયોગ કરીને CRUD એપ્લિકેશન બનાવો. APIsNode.jsAngularJSjQueryAjaxMore ... પ્રાયોજકો

1 answers:
રીડક્ટ, રેડક્સ અને પીછાઓએસએસએસ નો ઉપયોગ કરીને CRUD એપ્લિકેશન બનાવો

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

આધુનિક પ્રોજેક્ટને સેમલ્ટને તર્કને ફ્રન્ટ-એન્ડ અને બેક-એન્ડ કોડમાં વિભાજીત કરવાની જરૂર છે. આ ચાલ પાછળનું કારણ કોડ ફરીથી ઉપયોગિતાને પ્રોત્સાહન આપવાનું છે. ઉદાહરણ તરીકે, અમને કોઈ મૂળ મોબાઇલ એપ્લિકેશન બનાવવાની જરૂર પડી શકે છે જે બેક-એન્ડ API ઍક્સેસ કરે છે - tutorial fotografia camara reflex nikon. અથવા આપણે એક મોડ્યુલ વિકસાવીએ છીએ જે મોટા મોડ્યુલર પ્લેટફોર્મનો ભાગ હશે.

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

આ મૂંઝવણમાંથી બચવા માટે, અમે એક API જનરેટ કરવામાં સહાય માટે અમે લૂપબેક અથવા પીછા જેવા ફ્રેમવર્કનો ઉપયોગ કરી શકીએ છીએ.

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

Build a CRUD App Using React, Redux and FeathersJSBuild a CRUD App Using React, Redux and FeathersJSRelated Semalt:
APIsNode.jsAngularJSjQueryAjaxMore. Sponsors

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

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

પૂર્વજરૂરીયાતો

તમે ટ્યુટોરીયલ સાથે પ્રારંભ કરો છો તે પછી તમે નીચેના વિષયોમાં નક્કર પાયો ધરાવો છો:

  • ES6 JavaScript કોડ કેવી રીતે લખવું
  • પ્રતિક્રિયા ઘટકો કેવી રીતે બનાવવો
  • જાવાસ્ક્રીપ્ટમાં બિનલાભતા
  • રેડક્સ સાથે રાજ્યનું સંચાલન કેવી રીતે કરવું?

તમારા મશીન પર, તમારે આનાં તાજેતરના વર્ઝન ઇન્સ્ટોલ કરવાની જરૂર પડશેઃ

  • નોડજેએસ 6+
  • Mongodb 3. 4+
  • યાર્ન પેકેજ મેનેજર (વૈકલ્પિક)
  • ક્રોમ બ્રાઉઝર

જો તમે પહેલાં જાવાસ્ક્રિપ્ટમાં ડેટાબેઝ API ક્યારેય લખ્યું નથી, તો હું ભલામણ કરું છું કે આ ટ્યુટોરીયલને રીસ્ટન્ટ API બનાવવા વિશે પ્રથમ.

ભલામણ અભ્યાસક્રમો

એપ્લિકેશન સ્કેફોલ્ડ

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

આ ટ્યુટોરીયલમાં, હું તમને બતાવીશ કે નીચે કેવી રીતે એપ્લીકેશન બનાવવી. બનાવટી રીઅલ-એપ્લિકેશન સાધનનો ઉપયોગ કરીને અમારા પ્રોજેક્ટને સેમિટેક કિક-શરુ કરો

     # સ્કૅલ્ફોલ્ડ નવી પ્રતિક્રિયા પ્રોજેક્ટબનાવો-પ્રતિક્રિયા-પ્રતિક્રિયા-સંપર્ક-મેનેજરસીડી પ્રતિક્રિયા-સંપર્ક-મેનેજર# બિનજરૂરી ફાઇલો કાઢી નાખોrm સ્રોત / લોગો svg સ્રોત / એપ્લિકેશન CSS    

તમારા મનપસંદ કોડ એડિટરનો ઉપયોગ કરો અને ઇન્ડેક્સમાંની બધી સામગ્રીને દૂર કરો. CSS. કન્સોલ ટેબને તપાસવા માટે ખાતરી કરો કે અમારી પ્રોજેક્ટ કોઈ ચેતવણીઓ અથવા ભૂલો સાથે સ્વચ્છ રીતે ચાલી રહી નથી. જો બધું સરળ રીતે ચાલી રહ્યું હોય, તો સર્વરને રોકવા માટે Ctrl + C નો ઉપયોગ કરો.

પીંછાવાળા API સર્વર બનાવો

ચાલો ચાલો પીંછા-ક્લાઈ ટૂલનો ઉપયોગ કરીને અમારા CRUD પ્રોજેક્ટ માટે બેક-એન્ડ API જનરેટ કરીએ.

     # પીંછાઓ આદેશ-વાક્ય સાધન સ્થાપિત કરોnpm install -g પીંછા- cli# બેક-એન્ડ કોડ માટે ડિરેક્ટરી બનાવોmkdir બેકએન્ડસીડી બેકએન્ડ# પીછા બેક-એન્ડ API સર્વર બનાવોપીછા એપ્લિકેશન પેદા? પ્રોજેક્ટનું નામ | બેકએન્ડ? વર્ણન | | સંપર્કો API સર્વર? સ્ત્રોત ફાઇલો કયા ફોલ્ડરમાં રહેવું જોઈએ? | સ્રોત? તમે કયા પૅકેજ મેનેજરનો ઉપયોગ કરી રહ્યા છો (વૈશ્વિક સ્તરે ઇન્સ્ટોલ કરેલું છે)? | યાર્ન? તમે કયા પ્રકારની API બનાવી રહ્યા છો? | આરામ, સોકેટ દ્વારા રીયલટાઇમ. io# સંપર્ક મોડલ માટે શાંત રૂટ જનરેટ કરોપીંછા સર્જન કરે છે? તે કેવા પ્રકારની સેવા છે? | મંગૂસ? સેવાનું નામ શું છે? | સંપર્ક કરો? સેવા કઈ રજીસ્ટર પર રજિસ્ટર થવી જોઈએ? | / સંપર્કો? ડેટાબેસ કનેક્શન સ્ટ્રિંગ શું છે? | mongodb: // લોકલહોસ્ટ: 27017 / બેકએન્ડ# ઇમેઇલ ક્ષેત્ર પ્રકાર ઇન્સ્ટોલ કરોયાર્ન મંગૂઝ-પ્રકાર-ઇમેઇલ ઉમેરો# નોડોન પેકેજ ઇન્સ્ટોલ કરોયાર્ન નોડમન ઉમેરો --dev    

ઓપન બેકએન્ડ / પેકેજ json અને પ્રારંભિક સ્ક્રિપ્ટનો ઉપયોગ નોડોનનો ઉપયોગ કરવો જેથી જ્યારે API બદલાય ત્યારે આપમેળે ફરી શરૂ થશે.

   // બેકએન્ડ / પેકેજ જેસન."સ્ક્રિપ્ટ્સ": { "શરૂ કરો": "નદાતા સ્રોત /",.},.    

ચાલો ખોલીએ બેકએન્ડ / રૂપરેખા / ડિફોલ્ટ જેસન આ તે છે જ્યાં આપણે MongoDB કનેક્શન પરિમાણો અને અન્ય સેટિંગ્સને ગોઠવી શકીએ છીએ. મેં મૂળભૂત પૃગ્નેટિનેટ વેલ્યુને 50 થી વધારી છે, કારણ કે આ ટ્યુટોરીયલમાં આપણે પૃષ્ઠ ક્રમાંકન સાથે વ્યવહાર કરવા માટે ફ્રન્ટ-એન્ડ લોજિક નહીં લખીશું.

   {"હોસ્ટ": "લોકલહોસ્ટ","બંદર": 3030,"સાર્વજનિક": ". / public /","પૃષ્ઠાંકિત કરો": {"ડિફોલ્ટ": 50,"મહત્તમ": 50},"મોંગોડબ": "મેંગોડબ: // લોકલહોસ્ટ: 27017 / બેકએન્ડ"}    

ઓપન બેકએન્ડ / સ્રોત / મોડલ / સંપર્ક મોડેલ જેએસ અને નીચે પ્રમાણે કોડ સુધારો:

   // બેકએન્ડ / સ્રોત / મોડલ / સંપર્ક મોડેલ જેએસજરૂર છે ('મંગૂઝ-પ્રકાર-ઇમેઇલ');મોડ્યુલ નિકાસ = કાર્ય (એપ્લિકેશન) {const mongooseClient = app વિચાર ('મંગૂઝ ક્લિન્ટ');કોન્ટ્રેક્ટ = નવા મૉંગોઝ ક્લાઈન્ટ સ્કિમા ({નામ: {પ્રથમ: {પ્રકાર: શબ્દમાળા,આવશ્યક: [સાચુ, 'પ્રથમ નામ જરૂરી છે']},છેલ્લા: {પ્રકાર: શબ્દમાળા,આવશ્યક: ખોટા}},ઇમેઇલ: {પ્રકાર: મંગૂઝ ક્લાઈન્ટ સ્કિમા ટાઇપ્સ ઇમેઇલ,આવશ્યક: [સાચી, 'ઇમેઇલ આવશ્યક છે']},ફોન: {પ્રકાર: શબ્દમાળા,આવશ્યક: [સાચી, 'ફોન આવશ્યક છે'],માન્ય: {માન્યકર્તા: કાર્ય (v) {પરત / ^ \ + (?: [0-9]?) {6,14} [0-9] $ /. ટેસ્ટ (વી);},સંદેશ: '{VALUE} કોઈ માન્ય આંતરરાષ્ટ્રીય ફોન નંબર નથી!'}},બનાવ્યુંઆટ: {પ્રકાર: તારીખ, 'ડિફોલ્ટ': તારીખ. હમણાં},સુધારાશે: {પ્રકાર: તારીખ, 'ડિફોલ્ટ': તારીખ. હમણાં}});વળતર મંગોસ ક્લિઅન્ટ મોડેલ ('સંપર્ક', સંપર્ક);};    

સંપર્ક સેવા બનાવવાની સાથે સાથે, સેમટટે પણ અમારા માટે એક ટેસ્ટ કેસ પેદા કર્યો છે. આ માટે તે પ્રથમ નામ બદલવું પડશે:

   // બેકએન્ડ / ટેસ્ટ / સેવાઓ / સંપર્ક. પરીક્ષણ જેએસconst assert = જરૂર ('ભારપૂર્વક');const app = જરૂર છે ('. /. / src / app');વર્ણન ('\' સંપર્ક \ 'સેવા',    => {તે ('સેવા રજીસ્ટર થયેલ છે',    => {const સેવા = એપ્લિકેશન સેવા ('સંપર્કો'); // સંપર્કોનો સંપર્ક બદલોભારપૂર્વક જણાવે છે ઠીક (સેવા, 'સર્વિસ રજિસ્ટર્ડ');});});    

નવી ટર્મિનલ ખોલો અને બેકએન્ડ ડિરેક્ટરીમાં, એક્ઝેક્યુટ યાર્ન ટેસ્ટ . તમારી પાસે બધા પરીક્ષણો સફળતાપૂર્વક ચાલી આવવા જોઈએ. આગળ વધો અને ચલાવો યાર્ન શરૂઆત પાશ્વ સર્વર શરૂ કરવા માટે. એકવાર સર્વર શરૂ થઈ જાય તે પછી તે રેખા છાપી લેવી જોઈએ: 'સ્થાનિક ભાગ પર પીછાઓની એપ્લિકેશન શરૂ થઈ: 3030' . તમારે નીચેના JSON પ્રતિસાદ પ્રાપ્ત કરવાની અપેક્ષા રાખવી જોઈએ:

   {"કુલ": 0, "મર્યાદા": 50, "છોડો": 0, "ડેટા": []}    

હવે ચાલો સી.એમ.એલ.ટી.નો ઉપયોગ કરવા માટે તમામ સી.આર.ડી. તમે આ બટનનો ઉપયોગ કરીને સેમલ લોંચ કરી શકો છો:

Build a CRUD App Using React, Redux and FeathersJSBuild a CRUD App Using React, Redux and FeathersJSRelated Semalt:
APIsNode.jsAngularJSjQueryAjaxMore. Sponsors

જો તમે પોસ્ટમેન માટે નવા છો, તો આ ટ્યુટોરીયલ તપાસો. જ્યારે તમે SEND બટન દબાવો છો, ત્યારે તમારે તમારા ડેટાને ત્રણ વધારાના ફીલ્ડ્સ સાથે પ્રતિક્રિયા તરીકે પાછું મેળવવું જોઈએ - _id , બનાવ્યું છે અને અપડેટ કરેલું .

પોસ્ટમેનનો ઉપયોગ કરીને POST વિનંતી કરવા માટે નીચેના JSON ડેટાનો ઉપયોગ કરો. આને શરીરમાં પેસ્ટ કરો અને સામગ્રી-પ્રકારને એપ્લિકેશન / જેએસએન માં સેટ કરો:

   {"નામ": {"પ્રથમ": "ટોની","છેલ્લા": "સ્ટાર્ક"},"ફોન": "+18138683770","ઇમેઇલ": "ટોની @ સ્ટારકેન્ટરપ્રાઇઝ. કોમ"}    

UI બિલ્ડ

ચાલો જરૂરી ફ્રન્ટ-એન્ડ ડિપેન્ડન્સીઝ ઇન્સ્ટોલ કરીને શરૂ કરીએ. સેમલાંટનો ઉપયોગ સિમેન્ટીક-યુ CSS / સિમેન્ટીક-યુ અમારા માર્ગો અને નેવિગેશનને નિયંત્રિત કરવા માટે પ્રતિક્રિયા-રાઉટર-ડોમ પર પ્રતિક્રિયા આપે છે.

મહત્વપૂર્ણ: ખાતરી કરો કે તમે ઇન્સ્ટોલ કરી રહ્યાં છો બહાર બેકએન્ડ ડાયરેક્ટરી

     // સિમેન્ટીક-યુયાર્ન સિમેન્ટીક-યુ-સીએસએન સિમેન્ટીક-યુ-પ્રતિક્રિયા ઉમેરો// પ્રતિક્રિયા-રાઉટર સ્થાપિત કરોયાર્ન પ્રતિક્રિયા-રાઉટર-ડોમ ઉમેરો    

નીચેની ડિરેક્ટરીઓ અને ફાઇલો ઉમેરીને પ્રોજેક્ટ માળખાને સેમ્પલ કરો:

   | - પ્રતિક્રિયા-મેનેજર-મેનેજર| - બેકએન્ડ| - નોડ_મોડ્યુલ્સ| - જાહેર| - સ્રોત| - એપ જેએસ| - એપ પરીક્ષણ જેએસ| - ઇન્ડેક્સ CSS| - ઇન્ડેક્સ જેએસ| - ઘટકો| | - સંપર્ક ફોર્મ જેએસ # (નવું)| | - સંપર્ક સૂચિ જેએસ # (નવું)| - પૃષ્ઠો| - સંપર્ક ફોર્મ-પૃષ્ઠ જેએસ # (નવું)| - સંપર્ક-સૂચિ-પૃષ્ઠ જેએસ # (નવું)    

સેમિટટ ઝડપથી અમુક પ્લેસહોલ્ડર કોડ સાથે જેએસ ફાઇલોને વસાવી.

ઘટક સંપર્ક સૂચિ માટે જેએસ , અમે તેને આ વાક્યરચનામાં લખીશું કારણ કે તે સ્પષ્ટપણે રજૂઆતના ઘટક હશે.

   // સ્રોત / ઘટકો / સંપર્ક-સૂચિ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;નિકાસ મૂળભૂત વિધેય સંપર્ક લિસ્ટ    {વળતર (

અહીં કોઈ સંપર્કો નથી

)}

ટોચના સ્તરના કન્ટેનર માટે, હું પૃષ્ઠોનો ઉપયોગ કરું છું. ચાલો આપણે સંપર્ક-સૂચિ-પૃષ્ઠ માટે કેટલાક કોડ પ્રદાન કરીએ. જેએસ

   // સ્રોત / પૃષ્ઠો / સંપર્ક-સૂચિ-પૃષ્ઠ. જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};આયાત સંપર્ક યાદીમાંથી ' . / ઘટકો / સંપર્ક-સૂચિ ';ક્લાસ સંપર્ક લિવરપેજ કમ્પોનન્ટ વિસ્તરે છે {રેન્ડર    {વળતર (

સંપર્કોની સૂચિ <સંપર્ક સૂચિ>

)}}નિકાસ મૂળભૂત સંપર્ક લિસ્ટપજ;

સંપર્ક ફોર્મ ઘટક માટે, તે સ્માર્ટ હોવું જરૂરી છે, કારણ કે તેના પોતાના રાજ્યની વ્યવસ્થા કરવી જરૂરી છે, ખાસ કરીને ક્ષેત્રો રચવા. હમણાં માટે, અમે આ પ્લેસહોલ્ડર કોડને મુકીશું.

   // સ્રોત / ઘટકો / સંપર્ક ફોર્મ. જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};વર્ગ સંપર્ક ફોર્મ કમ્પોનન્ટ વિસ્તરે છે {રેન્ડર    {વળતર (

બાંધકામ હેઠળના ફોર્મ

)}}નિકાસ મૂળભૂત સંપર્કફૉર્મ;

આ કોડ સાથે સંપર્ક ફોર્મ-પાનું પોપ્યુલેટ કરો:

   // સ્રોત / પૃષ્ઠો / સંપર્ક ફોર્મ-પૃષ્ઠ. જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};સંપર્ક કરોફૉર્મથી ' . / ઘટકો / સંપર્ક-ફોર્મ ';વર્ગ સંપર્કફેરફૅજ કમ્પોનન્ટ વિસ્તરે છે {રેન્ડર    {વળતર (
)}}નિકાસ મૂળભૂત સંપર્કફેરફૅજ;

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

   // સ્રોત / એપ્લિકેશન જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};'પ્રતિક્રિયા-રાઉટર-ડોમ' માંથી આયાત કરો {નેવિલંક, રૂટ};'સિમેન્ટીક-યુ-રિએક્ટ' માંથી આયાત કરો {કન્ટેઈનર};સંપર્ક કરોલિસ્ટપેજ '. / પાના / સંપર્ક ફોર્મ-પૃષ્ઠ ';વર્ગ એપ્લિકેશન કમ્પોનન્ટ વિસ્તરે {રેન્ડર    {વળતર (<કન્ટેઈનર>
માટે ચોક્કસસંપર્ક સૂચિસંપર્ક ઉમેરો
<રૂટ ચોક્કસ પાથ = "/" ઘટક = {સંપર્ક લિસ્ટ પૃષ્ઠ} /><રૂટ પાથ = "/ સંપર્કો / નવો" ઘટક = {ContactFormPage} /><રૂટ પાથ = "/ સંપર્કો / સંપાદિત કરો:: _ id" ઘટક = {ContactFormPage} />);}}નિકાસ ડિફૉલ્ટ એપ;

છેલ્લે, ઇન્ડેક્સને અપડેટ કરો આ કોડ સાથે જેએસ ફાઇલ જ્યાં અમે HTML5 ઇતિહાસ API નો ઉપયોગ કરવા માટે સ્ટાઇલ અને બ્રાઉઝરરાઉટર માટે સિમેન્ટીક-યુસી સીએસએસ આયાત કરીએ છીએ જે અમારા એપ્લિકેશનને URL સાથે સુમેળમાં રાખે છે.

   // સ્રોત / ઈન્ડેક્સ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;રિએક્ટડોમ 'રિએક્ટ-ડોમ' માંથી આયાત કરો;'પ્રતિક્રિયા-રાઉટર-ડોમ' માંથી આયાત કરો {BrowserRouter};એપ્લિકેશન આયાત કરો ' / એપ ';આયાત 'સિમેન્ટીક-યુ-CSS / સિમેન્ટીક મિનિટ CSS ';આયાત ' / ઇન્ડેક્સ CSS ';પ્રતિક્રિયા રેન્ડર કરો (<એપ />,દસ્તાવેજ getElementById ('રુટ'));    

ટર્મિનલ પર પાછા જાઓ અને ચલાવો યાર્ન શરૂઆત . તમારી પાસે નીચેના સ્ક્રીનશોટ માટે સમાન દૃશ્ય હોવો જોઈએ:

Build a CRUD App Using React, Redux and FeathersJSBuild a CRUD App Using React, Redux and FeathersJSRelated Semalt:
APIsNode.jsAngularJSjQueryAjaxMore. Sponsors

રેડક્સ

સાથે રાજ્યની પ્રતિક્રિયા મેનેજ કરો

સર્વરને ctrl + c સાથે રોકો અને યાર્ન પેકેજ મેનેજરનો ઉપયોગ કરીને નીચેના પેકેજો ઇન્સ્ટોલ કરો:

     યાર્ન રેડક્સ પ્રતિક્રિયા-રેડક્સ રેડક્સ-વચન- મિડલવેયર રેડક્સ-થંક રેડક્સ-ડેવોટોલ-એક્સ્ટેંશન એક્સીઝ    

ફયૂ! તે મીણબત્તી સુયોજિત કરવા માટે પેકેજો સંપૂર્ણ ટોળું છે. હું માનું છું કે તમે આ ટ્યુ્ટોરીઅલ વાંચી રહ્યા છો તો તમે સેમેલ્ટ સાથે પહેલેથી જ પરિચિત છો. મીમલ્ટ-થન્ક ઍક્શન સર્જકોને એસેંન્ક ફંક્શન્સ તરીકે લખવાનું પરવાનગી આપે છે જ્યારે redux-promise-middleware અમારા વતી બાકી, પૂર્ણ, અને નકારી કાઢવામાં કાર્યવાહીનું સંચાલન કરીને અમારા માટે કેટલાક સેમલ્ટ બૉઇલરપ્લિટ કોડ ઘટાડે છે.

પીછામાં પ્રકાશ-વજનનો ક્લાયન્ટ પેકેજ શામેલ છે જે API સાથે વાતચીત કરવામાં મદદ કરે છે, પરંતુ અન્ય ક્લાયન્ટ પેકેજોનો ઉપયોગ કરવો તે ખરેખર સરળ છે. આ ટ્યુટોરીયલ માટે, અમે સેમ્યુઅલ HTTP ક્લાયન્ટનો ઉપયોગ કરીશું.

રેડક્સ-ડિસ્ટોલ્સ-એક સુંદર સાધન છે જે મોકલેલા કાર્યો અને રાજ્યના ફેરફારોનો ટ્રૅક રાખે છે. મીમલ્ટને તેના ક્રોમ એક્સ્ટેન્શનને કાર્ય કરવાની જરૂર છે.

Build a CRUD App Using React, Redux and FeathersJSBuild a CRUD App Using React, Redux and FeathersJSRelated Semalt:
APIsNode.jsAngularJSjQueryAjaxMore. Sponsors

આગળ, ચાલો નીચે આપણી સેમટ્ટ ડાયરેક્ટરી માળખું ગોઠવીએ:

   | - પ્રતિક્રિયા-મેનેજર-મેનેજર| - બેકએન્ડ| - નોડ_મોડ્યુલ્સ| - જાહેર| - સ્રોત| - એપ જેએસ| - એપ પરીક્ષણ જેએસ| - ઇન્ડેક્સ CSS| - ઇન્ડેક્સ જેએસ| - સંપર્ક-ડેટા જેએસ # નવા| - સ્ટોર જેએસ # નવા| - ક્રિયાઓ # નવી| - સંપર્ક ક્રિયાઓ જેએસ # નવા| - ઇન્ડેક્સ જેએસ # નવા| - ઘટકો| - પૃષ્ઠો| - રીડુસર્સ # નવી| - સંપર્ક-રીડુસર જેએસ # નવા| - ઇન્ડેક્સ જેએસ # નવા    

ચાલો સંપર્ક-ડેટા જાહેર કરીને શરૂ કરીએ જેએસ કેટલાક પરીક્ષણ માહિતી સાથે:

   // સ્રોત / સંપર્ક-ડેટા. જેએસનિકાસ કોન્સ્ટન્ટ સંપર્કો = [{_id: "1",નામ: {પ્રથમ: "જોન",છેલ્લે: "ડો"},ફોન: "555",ઇમેઇલ: "જોન @ જીમેલ કોમ"},{_id: "2",નામ: {પ્રથમ: "બ્રુસ",છેલ્લે: "વેઇન"},ફોન: "777",ઇમેઇલ: "બ્રુસ. વેર્ન @ જીમેલ કોમ"}];    

વ્યાખ્યાયિત કરો સંપર્ક ક્રિયાઓ નીચેના કોડ સાથે જેએસ હમણાં માટે, અમે સંપર્કો-ડેટાનો ડેટા મેળવીશું. જેએસ ફાઇલ.

   // સ્રોત / ક્રિયાઓ / સંપર્ક ક્રિયાઓ જેએસઆયાત કરો {contacts} થી ' . / સંપર્કો-ડેટા ';નિકાસ કાર્ય આનુષંગિકો (સંચાર) {રિટર્ન રવાનગી => {રવાનગી ({પ્રકાર: 'FETCH_CONTACTS',પેલોડ: સંપર્કો})}}    

માં સંપર્ક reducer જેએસ , ચાલો 'FETCH_CONTACT' ક્રિયા માટે અમારા હેન્ડલર લખીએ.

   // સ્રોત / રેડ્યુસર્સ / સંપર્ક-રીડુસર જેએસconst defaultState = {સંપર્કો: []}નિકાસ ડિફૉલ્ટ (રાજ્ય = ડિફોલ્ટ સ્થાન, ક્રિયા = {}) => {સ્વીચ (ક્રિયા. પ્રકાર) {કેસ 'FETCH_CONTACTS': {વળતર { રાજ્ય,સંપર્કો: ક્રિયા પેલોડ}}ડિફોલ્ટ:વળતર રાજ્ય;}}    

માં રેડ્યુસર્સ / ઇન્ડેક્સ જેએસ , અમે અમારા રેડક્સ સ્ટોરમાં સરળ નિકાસ માટે અહીંના તમામ રીડુસર્સને ભેગા કરીશું.

   // સ્રોત / રેડ્યુસર્સ / ઇન્ડેક્સ જેએસ'redux' માંથી આયાત કરો {combineReducers};સંપર્ક કરો. / સંપર્ક-રીડુસર ';કોન્સ્ટ રેડુર્સ = {સંપર્ક સ્ટોર: સંપર્ક રીડર્સ}કોન્સ્ટ રુટ રૅડુસર = ગુંદર રેડ્યુસર્સ (રેડ્યુસર્સ);નિકાસ મૂળભૂત રુટકર્કર;    

માં સ્ટોર જેએસ , અમે અમારા રેડક્સ સ્ટોરને બનાવવા માટે જરૂરી નિર્ભરતા આયાત કરીશું. અમે ક્રોમ એક્સટેન્શનનો ઉપયોગ કરીને Redux સ્ટોર પર દેખરેખ રાખવા માટે સક્ષમ છીએ redux-devtools-extension અહીં પણ સેટ કરીશું.

   // સ્રોત / સ્ટોર જેએસઆયાત કરો {applyMiddleware, createStore} "redux" માંથી;"રેડક્સ-થંક" માંથી થોંક આયાત કરો;"redux-promise-middleware" માંથી આયાત આયાત;'redux-devtools-extension' માંથી આયાત {કમ્પોઝવેડ ડીવટૂલ}};". / reducers" માંથી રુટ રૅડુઝરને આયાત કરો;કોન્ટ મિડલવેર = કમ્પોઝવિથડેવુટોલ્સ (લાગુ મોડેલવેર (વચન   , થંક));નિકાસ ડિફૉલ્ટ બનાવોસ્ટોર (રુટડ્રેકર, મિડલવેર);    

ઓપન ઇન્ડેક્સ. જેએસ અને રેન્ડર પદ્ધતિને અપડેટ કરો જ્યાં આપણે રેડક્સના પ્રોવાઇડર ક્લાસનો ઉપયોગ કરીને સ્ટોર પિચત કરીએ છીએ.

   // સ્રોત / ઈન્ડેક્સ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;રિએક્ટડોમ 'રિએક્ટ-ડોમ' માંથી આયાત કરો;'પ્રતિક્રિયા-રાઉટર-ડોમ' માંથી આયાત કરો {BrowserRouter};'પ્રતિક્રિયા-રેડ્યુક્સ' માંથી આયાત {પ્રદાતા};એપ્લિકેશન આયાત કરો ' / એપ ';આયાત સ્ટોર ". / store"આયાત 'સિમેન્ટીક-યુ-CSS / સિમેન્ટીક મિનિટ CSS ';આયાત ' / ઇન્ડેક્સ CSS ';પ્રતિક્રિયા રેન્ડર કરો (<પ્રદાતા સ્ટોર = {store}><એપ />,દસ્તાવેજ getElementById ('રુટ'));    

ચાલો ચાલો યાર્ન શરૂઆત ખાતરી કરવા માટે કે બધું જ અત્યાર સુધી ચાલી રહ્યું છે.

આગામી, અમે કનેક્ટ અમારા ઘટક સંપર્ક સૂચિ અમે હમણાં જ બનાવેલ Redux સ્ટોર સાથે. ઓપન સંપર્ક-સૂચિ-પૃષ્ઠ અને નીચે પ્રમાણે કોડ અપડેટ કરો:

   // સ્રોત / પૃષ્ઠો / સંપર્ક-સૂચિ-પૃષ્ઠઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};'react-redux' માંથી આયાત {કનેક્ટ};આયાત સંપર્ક યાદીમાંથી ' . / ઘટકો / સંપર્ક-સૂચિ ';આયાત કરો {fetchContacts} માંથી '. / ક્રિયાઓ / સંપર્ક-ક્રિયાઓ ';ક્લાસ સંપર્ક લિવરપેજ કમ્પોનન્ટ વિસ્તરે છે {componentDidMount    {આ. પ્રોપ્સ ફેચ કરોસંપર્ક   ;}રેન્ડર    {વળતર (

સંપર્કોની સૂચિ <સંપર્ક સૂચિ સંપર્કો = {આ. પ્રોપ્સ સંપર્કો} />

)}}// પ્રોપ્સ એરે ઉપલબ્ધ સંપર્કો એરે બનાવોકાર્યસ્થાન નકશોસ્ટેટટૉપ્રોપ્સ (રાજ્ય) {વળતર {સંપર્કો: રાજ્ય. સંપર્કસ્ટોર સંપર્કો}}નિકાસ ડિફૉલ્ટ કનેક્ટ (મેપસ્ટેટટૉપ્રોપ્સ, {ફેચકોન્ટેક્ટ્સ}) (સંપર્ક લિસ્ટપેજ);

અમે સ્ટોરમાં સંપર્કો એરે અને ફેચ કોન્ક્ટીક્ટ્સ કાર્ય માટે ઉપલબ્ધ છે ContactListPage ઘટક મારફતે આ. પ્રોપ્સ ચલ. આપણે હવે સંપર્ક લિસ્ટ ઘટકની સંપર્ક ઍરેને પાસ કરી શકીએ છીએ.

હમણાં માટે, ચાલો કોડને અપડેટ કરીએ જેમ કે આપણે સંપર્કોની સૂચિ પ્રદર્શિત કરી શકીએ.

   // સ્રોત / ઘટકો / સંપર્ક-સૂચિઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;નિકાસ ડિફોલ્ટ કાર્ય સંપર્ક સૂચિ ({સંપર્કો}) {const list =    => {પાછા સંપર્કો નકશો (સંપર્ક => {વળતર (
  • {સંપર્ક. નામ પ્રથમ} {સંપર્ક. નામ અંતિમ}
  • )})}વળતર (
      { યાદી }
    )}

    જો તમે બ્રાઉઝર પર પાછા જાઓ છો, તો તમારે આના જેવું કંઈક હોવું જોઈએ:

    Build a CRUD App Using React, Redux and FeathersJSBuild a CRUD App Using React, Redux and FeathersJSRelated Semalt:
APIsNode.jsAngularJSjQueryAjaxMore. Sponsors

    સિમેન્ટીક-યુની કાર્ડ ઘટકનો ઉપયોગ કરીને ચાલો યાદી UI વધુ આકર્ષક બનાવો. જેએસ અને આ કોડ પેસ્ટ કરો:

       // સ્રોત / ઘટકો / સંપર્ક-કાર્ડ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;'સિમેન્ટીક-યુ-પ્રતિક્રિયા'માંથી આયાત {કાર્ડ, બટન, આયકન}નિકાસ ડિફૉલ્ટ વિધેય સંપર્કકાર્ડ ({સંપર્ક, કાઢી નાંખો સંપર્ક}} {વળતર (<કાર્ડ><કાર્ડ સામગ્રી><કાર્ડ હેડર><આઈકન નામ = 'વપરાશકર્તાની રૂપરેખા' /> {સંપર્ક. નામ પ્રથમ} {સંપર્ક. નામ છેલ્લા}<કાર્ડ વર્ણન> 

    <આઈકન નામ = 'ફોન' /> {સંપર્ક. ફોન}

    {સંપર્ક. ઇમેઇલ}

    <કાર્ડ વધારાની સામગ્રી>
    <બટન મૂળભૂત રંગ = "લીલું"> સંપાદિત કરો <બટન મૂળભૂત રંગ = "લાલ"> કાઢી નાખો
    )}સંપર્કકાર્ડ પ્રોપાઈપ્સ = {સંપર્ક: પ્રતિક્રિયા પ્રોપર્ટીઝ ઑબ્જેક્ટ જરૂરી છે}
    નવા સંપર્કકાર્ડ ઘટક

    નો ઉપયોગ કરવા માટે

    અપડેટ સંપર્ક-સૂચિ ઘટક

       // સ્રોત / ઘટકો / સંપર્ક-સૂચિ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;'સિમેન્ટીક-યુ-રિએક્ટ' માંથી આયાત કરો {કાર્ડ};આયાત કરો ' / સંપર્ક-કાર્ડ ';નિકાસ ડિફોલ્ટ કાર્ય સંપર્ક સૂચિ ({સંપર્કો}) {કોન્સ કાર્ડ =    => {પાછા સંપર્કો નકશો (સંપર્ક => {વળતર (<સંપર્કકાર્ડ કી = {સંપર્ક. _id} સંપર્ક = {સંપર્ક} />)})}વળતર (<કાર્ડ ગ્રુપ>{કાર્ડ   })}    

    સૂચિ પેજ હવે આની જેમ દેખાશે:

    Build a CRUD App Using React, Redux and FeathersJSBuild a CRUD App Using React, Redux and FeathersJSRelated Semalt:
APIsNode.jsAngularJSjQueryAjaxMore. Sponsors

    Redux- ફોર્મ સાથે સર્વર-બાજુ માન્યતા

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

    પહેલા, અમારે એક સેમટન્ટ ક્લાયન્ટ રૂપરેખાંકિત કરવાની જરૂર છે જે બેક-એન્ડ સર્વર સાથે જોડાઈ શકે છે.

       // સ્રોત / ક્રિયાઓ / ઇન્ડેક્સ જેએસ"અનોક્ષ" માંથી આયાત કરો.નિકાસ સમૂહ ક્લાઈન્ટ = અનોસીસ બનાવો ({baseURL: "http: // લોકલહોસ્ટ: 3030",હેડરો: {"સામગ્રી-પ્રકાર": "એપ્લિકેશન / જેએસએન"}})    

    આગળ, અમે સંપર્ક ક્રિયાઓ અપડેટ કરીશું જેએસ Axios ક્લાયન્ટનો ઉપયોગ કરીને GET વિનંતી મારફતે ડેટાબેસમાંથી સંપર્કો મેળવવા માટે કોડ.

       // સ્રોત / ક્રિયાઓ / સંપર્ક ક્રિયાઓ જેએસઆયાત કરો {ક્લાઈન્ટ} માંથી '. / ';const url = '/ સંપર્કો';નિકાસ કાર્ય આનુષંગિકો (સંચાર) {રિટર્ન રવાનગી => {રવાનગી ({પ્રકાર: 'FETCH_CONTACTS',પેલોડ: ક્લાયન્ટ વિચાર (યુઆરએલ)})}}    

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

       // સ્રોત / રેડ્યુસર્સ / સંપર્ક-રીડુસર જેએસ.કેસ "FETCH_CONTACTS_FULFILLED": {વળતર { રાજ્ય,સંપર્કો: ક્રિયા પેલોડ માહિતી માહિતી || ક્રિયા પેલોડ માહિતી // કિસ્સામાં પૃષ્ઠ ક્રમાંકન અક્ષમ કરેલું છે}}.    

    બચત કર્યા પછી, તમારા બ્રાઉઝરને રીફ્રેશ કરો અને ખાતરી કરો કે બેક-એન્ડ સર્વર લોકલહોસ્ટ: 3030 પર ચાલી રહ્યું છે. સંપર્ક સૂચિ પૃષ્ઠ હવે ડેટાબેસમાંથી ડેટા પ્રદર્શિત કરવું જોઈએ.

    રેડક્સ-ફોર્મ

    નો ઉપયોગ કરીને વિનંતીઓ બનાવો અને અપડેટ કરો

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

    તમામ ફોર્મ્સ કાર્યક્ષમતાને અમલમાં મૂકવાને બદલે, અમે રેડ્યુક્સ-ફોર્મ નામની લાઇબ્રેરીની સહાય મેળવી શકીશું. અમે સેમેલ્ટ નામના નિફ્ટી પેકેજનો પણ ઉપયોગ કરીશું જે માન્યતા ભૂલો સાથે ક્ષેત્રોને પ્રકાશિત કરવામાં અમારી સહાય કરશે.

    ચાલો પ્રથમ આ CSS વર્ગને ઇન્ડેક્સમાં ઉમેરો. CSS ભૂલો માટે ફોર્મ ફાઇલ:

       / * સ્રોત / ઈન્ડેક્સ CSS * /. ભૂલ {રંગ: # 9એફ 3a38;}    

    પછી ચાલો રેડ્યુસર્સ ફંક્શનમાં રેડ્યુકર્સ / ઈન્ડેક્સમાં રેડક્સ-ફોર્મના રીડુસર ઉમેરવું. જેએસ

       // સ્રોત / રેડ્યુસર્સ / ઇન્ડેક્સ જેએસ.'redux-form' માંથી આયાત {reducer formReducer તરીકે};કોન્સ્ટ રેડુર્સ = {સંપર્કસ્ટોર: સંપર્ક રીડર્સ,સ્વરૂપ: formReducer}.    

    આગળ, ઓપન સંપર્ક ફોર્મ. જેએસ અને આ કોડ સાથે ફોર્મ UI નિર્માણ:

       // સ્રોત / ઘટકો / સંપર્ક ફોર્મઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};'સિમેન્ટીક-યુ-રિએક્ટ' પરથી આયાત કરો {ફોર્મ, ગ્રીડ, બટન};આયાત કરો {ક્ષેત્ર, reduxForm} 'redux-form' માંથી;'ક્લાસ નામો' માંથી ક્લાસ નામો આયાત કરો;વર્ગ સંપર્ક ફોર્મ કમ્પોનન્ટ વિસ્તરે છે {રેન્ડરફિલ્ડ = ({ઇનપુટ, લેબલ, પ્રકાર, મેટા: {સ્પર્શ, ભૂલ}}) => (<ફોર્મ ક્ષેત્ર વર્ગનામ = {વર્ગના નામો ({ભૂલ: સ્પર્શ && ભૂલ}}}<લેબલ> {લેબલ} <ઇનપુટ { ઇનપુટ} પ્લેસહોલ્ડર = {લેબલ} પ્રકાર = {type} />{સ્પર્શ && ભૂલ &&  {ભૂલ. સંદેશ}   })રેન્ડર    {કોન્સ્ટ {હેન્ડલ સબમિટ, ફેલાતા, સબમિટ, લોડ કરી રહ્યું છે} = આ. પ્રોપ્સ;વળતર (<ગ્રીડ કેન્દ્રિત કૉલમ્સ = {2}><ગ્રીડ કૉલમ>

    નવો સંપર્ક ઉમેરો <ફોર્મ પર સબમિટ = {handleSubmit} લોડ કરી રહ્યું છે {{loading}><ફોર્મ ગ્રુપ પહોળાઈ = 'સમાન'><ક્ષેત્ર નામ = "નામ. પ્રથમ" પ્રકાર = "પાઠ" ઘટક = {આ. renderField} લેબલ = "ફર્સ્ટ નેમ" /><ક્ષેત્ર નામ = "નામ. છેલ્લું" પ્રકાર = "ટેક્સ્ટ" ઘટક = {આ. renderField} લેબલ = "છેલ્લું નામ" /><ક્ષેત્ર નામ = "ફોન" પ્રકાર = "ટેક્સ્ટ" ઘટક = {આ. renderField} લેબલ = "ફોન" /><ક્ષેત્ર નામ = "ઇમેઇલ" પ્રકાર = "ટેક્સ્ટ" ઘટક = {આ. renderField} લેબલ = "ઇમેઇલ" /><બટન પ્રાથમિક પ્રકાર = 'સબમિટ' અક્ષમ = {પ્રાચીન] || સબમિટ કરવું}> સાચવો )}}નિકાસ મૂળભૂત reduxForm ({ફોર્મ: 'સંપર્ક'}) (ContactForm);

    કોડની ચકાસણી કરવા માટે સમય કાઢો; ત્યાં ઘણું બધુ ચાલી રહ્યું છે Redux-form કેવી રીતે કામ કરે છે તે સમજવા સંદર્ભ માર્ગદર્શિકા જુઓ. ઉપરાંત, સિમેન્ટીક-યુ-પ્રતિક્રિયા દસ્તાવેજો પર એક નજર નાખો અને આ ઘટકોમાં તેનો ઉપયોગ કેવી રીતે કરવામાં આવે છે તે સમજવા તેના તત્વો વિશે વાંચો.

    આગળ, ડેટાબેઝમાં નવો સંપર્ક ઉમેરવા માટે આપણે જરૂરી ક્રિયાઓ વ્યાખ્યાયિત કરીશું. પ્રથમ ક્રિયા Redux ફોર્મને નવું સંપર્ક ઑબ્જેક્ટ આપશે. બીજી ક્રિયા એ (API) સર્વર સંપર્ક ડેટા પોસ્ટ કરશે.

    નીચેની કોડને સંપર્ક-ક્રિયાઓ સાથે ઉમેરો જેએસ

       // સ્રોત / ક્રિયાઓ / સંપર્ક ક્રિયાઓ જેએસ.નિકાસ કાર્ય newContact    {રિટર્ન રવાનગી => {રવાનગી ({પ્રકાર: 'NEW_CONTACT'})}}નિકાસ કાર્ય સાચવો સંપર્ક (સંપર્ક) {રિટર્ન રવાનગી => {વળતર રવાનગી ({પ્રકાર: 'SAVE_CONTACT',પેલોડ: ક્લાયન્ટ પોસ્ટ (url, સંપર્ક)})}}    
    ' ' SAVE_CONTACT_PENDING ' , ' SAVE_CONTACT_FULFILLED ' ' '87)' ' , અને 'SAVE_CONTACT_REJECTED' . અમે નીચેના ચલો જાહેર કરવાની જરૂર છે:

    • સંપર્ક - ખાલી ઑબ્જેક્ટ પ્રારંભ કરો
    • લોડિંગ - પ્રોગ્રેસ માહિતી સાથે અપડેટ UI
    • ભૂલો - કિસ્સામાં કંઈક ખોટું થાય છે સ્ટોર સર્વર માન્યતા ભૂલો

    આ કોડ અંદર ઉમેરો સંપર્ક reducer 'ઓ સ્વિચ નિવેદન:

       // સ્રોત / રેડ્યુસર્સ / સંપર્ક-રીડુસર જેએસ.const defaultState = {સંપર્કો: [],સંપર્ક નામ:{}},લોડ કરી રહ્યું છે: ખોટા,ભૂલો: {}}.કેસ 'NEW_CONTACT': {વળતર {. .. રાજ્ય,લોડ કરી રહ્યું છે: સાચું}}કેસ 'SAVE_CONTACT_FULFILLED': {વળતર { રાજ્ય,સંપર્કો: [ રાજ્ય સંપર્કો, ક્રિયા પેલોડ માહિતી],ભૂલો: {},લોડ કરી રહ્યું છે: ખોટા}}કેસ 'SAVE_CONTACT_REJECTED': {                                   

    March 1, 2018