Redux સરળ શબ્દોમાં કેવી રીતે કામ કરે છે
React components વચ્ચે ડેટા પસાર કરવો એ ઘણીવાર 'ગેમ ઓફ ટેલિફોન' જેવું લાગે છે. તમે ડેટાને પેરેન્ટ (parent) થી ચાઇલ્ડ (child) અને પછી ગ્રાન્ડચાઇલ્ડ (grandchild) સુધી પહોંચાડો છો. જેમ જેમ તમારું એપ વધતું જાય તેમ આ પ્રક્રિયા ગૂંચવણભરી બની જાય છે.
Redux આ સમસ્યાનું સમાધાન કરે છે. તે 'single source of truth' બનાવે છે. વિખરાયેલા ડેટાને બદલે, બધું જ એક કેન્દ્રીય વોલ્ટ (central vault) માં રહે છે.
Redux ને સમજવા માટે એક કોફી શોપ વિશે વિચારો.
The Store (ધ વોલ્ટ) આ દુકાન માટેનું લેજર (હિસાબની ચોપડી) છે. તે કોફી બીન્સની સંખ્યા, ઓર્ડર અને સ્ટાફની યાદીનો હિસાબ રાખે છે.
The Action (ઓર્ડર)
ગ્રાહક કાઉન્ટર પરથી સીધો લેટે (latte) નથી લેતા. તેઓ ઓર્ડર આપે છે. Action એ એક સાદો ઓબ્જેક્ટ છે જે વર્ણવે છે કે શું થયું છે.
ઉદાહરણ: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (બેરિસ્ટા) બેરિસ્ટા એ એકમાત્ર વ્યક્તિ છે જે લેજરને અપડેટ કરે છે. તેઓ વર્તમાન state અને નવો ઓર્ડર લે છે. ત્યારબાદ તેઓ લેજરનું નવું વર્ઝન બનાવે છે.
The Dispatch (કેશિયર) કેશિયર તમારો ઓર્ડર લે છે અને તે બેરિસ્ટાને આપે છે. Dispatch એ ફંક્શન છે જે તમારા action ને store સુધી પહોંચાડે છે.
Redux નો ઉપયોગ શા માટે કરવો?
જેમ જેમ તમારું એપ યુઝર પ્રોફાઇલ અથવા શોપિંગ કાર્ટ વગેરે સાથે વિસ્તરે છે, તેમ કેન્દ્રીય સ્ટોર ડિબગિંગ (debugging) ને સરળ બનાવે છે. ડેટા ક્યારે અને શા માટે બદલાયો તે જોવા માટે તમે તમારા action history ને જોઈ શકો છો. તે તમારી વેબસાઇટ માટે ફ્લાઇટ રેકોર્ડર જેવું કામ કરે છે.
સારાંશ:
• Action: ફેરફારનું વર્ણન કરતી એક નોંધ. • Reducer: ફેરફાર કરવાની લોજિક (logic). • Dispatch: એ ટ્રિગર જે action ને લોજિક સુધી મોકલે છે.
સ્ત્રોત: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp