Understanding Zustand

સ્ટેટ મેનેજમેન્ટ (State management) ઘણીવાર ખૂબ જ જટિલ લાગે છે.

તમે React useState નો ઉપયોગ કેવી રીતે કરવો તે જાણો છો. તમે props કેવી રીતે પાસ કરવા તે જાણો છો. તમે સ્ટેટને ઉપર કેવી રીતે લઈ જવું (lift state up) તે જાણો છો.

પરંતુ જ્યારે તમારી એપ મોટી થાય છે ત્યારે બધું જ બગડી જાય છે. તમે એવા ઘટકો (components) દ્વારા ડેટા પાસ કરવાનું શરૂ કરો છો જેને તેની જરૂર નથી. આને prop drilling કહેવામાં આવે છે. તે તમારા કોડને અસ્તવ્યસ્ત અને જાળવવામાં મુશ્કેલ બનાવે છે.

Zustand આ સમસ્યાનું સમાધાન કરે છે. તે તમારી એપને તમારા React components ની બહાર એક શેર કરેલ સ્ટેટ (shared state) આપે છે.

આ રીતે વિચારો:

Zustand વગર: Component A, B ને props પાસ કરે છે, B, C ને props પાસ કરે છે, અને C, D ને props પાસ કરે છે.

Zustand સાથે: દરેક component સીધું જ એક સેન્ટ્રલ સ્ટોર (central store) સાથે વાત કરે છે. કોઈ મધ્યસ્થી નહીં. કોઈ prop drilling નહીં.

Zustand સ્ટોર બે વસ્તુઓનું બનેલું હોય છે:

  • State: તમારો ડેટા.
  • Actions: એવા ફંક્શન્સ જે તમારા ડેટાને બદલે છે.

બસ, આટલું જ છે.

Zustand ઝડપી છે કારણ કે તે ફક્ત એવા જ components ને ફરીથી રેન્ડર (re-render) કરે છે જે બદલાયેલા ચોક્કસ ડેટાનો ઉપયોગ કરે છે.

જો તમારે પેજ રિફ્રેશ થયા પછી પણ તમારો ડેટા સાચવી રાખવો હોય, તો localStorage નો ઉપયોગ કરો. કારણ કે localStorage ફક્ત સ્ટ્રિંગ્સ (strings) જ સ્ટોર કરે છે, તેથી તમારે ઓબ્જેક્ટ્સને સેવ કરવા માટે JSON.stringify અને તેને વાંચવા માટે JSON.parse નો ઉપયોગ કરવો પડશે.

auth store ને સ્ટ્રક્ચર કરવાની એક સરળ રીત અહીં છે:

  • localStorage માં યુઝર અને ટોકન સ્ટોર કરો.
  • સ્ટોર અને બ્રાઉઝર સ્ટોરેજને અપડેટ કરવા માટે login ફંક્શનનો ઉપયોગ કરો.
  • બંનેને ક્લિયર કરવા માટે logout ફંક્શનનો ઉપયોગ કરો.

તે Redux સાથે કેવી રીતે સરખાય છે?

Redux માં dispatchers અને reducers ની જરૂર પડે છે. તેમાં ઘણો બધો boilerplate કોડ સામેલ હોય છે. Zustand તમને સીધું જ ફંક્શન કોલ કરવા દે છે. તેમાં માનસિક બોજ (mental overhead) ઓછો છે અને સેટઅપ પણ ઓછું છે.

ટાળવા જેવી સામાન્ય ભૂલો:

  • create ફંક્શનમાં ઓબ્જેક્ટ રિટર્ન કરવાનું ભૂલી જવું. તમારા ઓબ્જેક્ટની આસપાસ કૌંસ (parentheses) નો ઉપયોગ કરો.
  • તમારા state ઓબ્જેક્ટની અંદર સેમીકોલન (semicolons) નો ઉપયોગ કરવો. તેના બદલે કોમા (commas) નો ઉપયોગ કરો.
  • જે ડેટા પહેલેથી જ સ્ટ્રિંગ છે તેને પાર્સ (parse) કરવો.

સ્ટેટ મેનેજમેન્ટ લાઇબ્રેરીઓ સ્ટેટ મેનેજ કરવા વિશે નથી. તે જટિલતા (complexity) મેનેજ કરવા વિશે છે.

દરેક API ને યાદ રાખવાનો પ્રયત્ન કરવાનું બંધ કરો. સાધન (tool) કઈ સમસ્યા ઉકેલવાનો પ્રયાસ કરી રહ્યું છે તેના પર ધ્યાન આપવાનું શરૂ કરો. જ્યારે તમે સમસ્યા સમજી લો છો, ત્યારે તે સાધન સમજાય છે.

Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11