Zustand ਨੂੰ ਸਮਝਣਾ
State management ਅਕਸਰ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਲੱਗਦੀ ਹੈ।
ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ React useState ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ props ਕਿਵੇਂ ਪਾਸ ਕਰਨੇ ਹਨ। ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ state ਨੂੰ ਉੱਪਰ (lift state up) ਕਿਵੇਂ ਲੈ ਕੇ ਜਾਣਾ ਹੈ।
ਪਰ ਜਦੋਂ ਤੁਹਾਡੀ ਐਪ ਵਧਦੀ ਹੈ, ਤਾਂ ਸਭ ਕੁਝ ਵਿਗੜ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਅਜਿਹੇ components ਰਾਹੀਂ ਡਾਟਾ ਪਾਸ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦੇ ਹੋ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਸਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। ਇਸਨੂੰ prop drilling ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਗੁੰਝਲਦਾਰ ਅਤੇ ਬਣਾਈ ਰੱਖਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਬਣਾ ਦਿੰਦਾ ਹੈ।
Zustand ਇਸਦਾ ਹੱਲ ਕਰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਤੁਹਾਡੇ React components ਤੋਂ ਬਾਹਰ ਇੱਕ shared state ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸਮਝੋ:
Zustand ਤੋਂ ਬਿਨਾਂ: Component A, B ਨੂੰ props ਪਾਸ ਕਰਦਾ ਹੈ, B, C ਨੂੰ props ਪਾਸ ਕਰਦਾ ਹੈ, ਅਤੇ C, D ਨੂੰ props ਪਾਸ ਕਰਦਾ ਹੈ।
Zustand ਦੇ ਨਾਲ: ਹਰ component ਸਿੱਧਾ ਇੱਕ ਕੇਂਦਰੀ store ਨਾਲ ਗੱਲ ਕਰਦਾ ਹੈ। ਕੋਈ ਵਿਚੋਲਾ ਨਹੀਂ। ਕੋਈ prop drilling ਨਹੀਂ।
ਇੱਕ Zustand store ਦੋ ਚੀਜ਼ਾਂ ਤੋਂ ਬਣਿਆ ਹੁੰਦਾ ਹੈ:
- State: ਤੁਹਾਡਾ ਡਾਟਾ।
- Actions: ਉਹ functions ਜੋ ਤੁਹਾਡੇ ਡਾਟਾ ਨੂੰ ਬਦਲਦੇ ਹਨ।
ਬੱਸ ਇਹੀ ਹੈ।
Zustand ਤੇਜ਼ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸਿਰਫ਼ ਉਹਨਾਂ components ਨੂੰ ਹੀ re-render ਕਰਦਾ ਹੈ ਜੋ ਬਦਲੇ ਹੋਏ ਖਾਸ ਡਾਟਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ ਡਾਟਾ ਪੇਜ ਰਿਫ੍ਰੈਸ਼ ਹੋਣ 'ਤੇ ਵੀ ਬਚਿਆ ਰਹੇ, ਤਾਂ localStorage ਦੀ ਵਰਤੋਂ ਕਰੋ। ਕਿਉਂਕਿ localStorage ਸਿਰਫ਼ strings ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ objects ਨੂੰ ਸੇਵ ਕਰਨ ਲਈ JSON.stringify ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਪੜ੍ਹਨ ਲਈ JSON.parse ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ।
ਇੱਕ auth store ਨੂੰ structure ਕਰਨ ਦਾ ਇੱਕ ਸੌਖਾ ਤਰੀਕਾ ਇੱਥੇ ਦਿੱਤਾ ਗਿਆ ਹੈ:
- User ਅਤੇ token ਨੂੰ
localStorageਵਿੱਚ ਸਟੋਰ ਕਰੋ। - Store ਅਤੇ browser storage ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਇੱਕ login function ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਦੋਵਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ ਇੱਕ logout function ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਹ Redux ਨਾਲ ਕਿਵੇਂ ਤੁਲਨਾ ਕਰਦਾ ਹੈ?
Redux ਲਈ dispatchers ਅਤੇ reducers ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਵਿੱਚ ਬਹੁਤ ਸਾਰਾ boilerplate code ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। Zustand ਤੁਹਾਨੂੰ ਸਿੱਧਾ ਇੱਕ function ਕਾਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਮਾਨਸਿਕ ਬੋਝ (mental overhead) ਘੱਟ ਹੈ ਅਤੇ setup ਵੀ ਘੱਟ ਹੈ।
ਬਚਣ ਲਈ ਆਮ ਗਲਤੀਆਂ:
createfunction ਵਿੱਚ object return ਕਰਨਾ ਭੁੱਲ ਜਾਣਾ। ਆਪਣੇ object ਦੇ ਆਲੇ-ਦੁਆਲੇ parentheses ਦੀ ਵਰਤੋਂ ਕਰੋ।- ਆਪਣੇ state object ਦੇ ਅੰਦਰ semicolons ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਇਸਦੀ ਬਜਾਏ commas ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਅਜਿਹੇ ਡਾਟਾ ਨੂੰ parse ਕਰਨਾ ਜੋ ਪਹਿਲਾਂ ਹੀ ਇੱਕ string ਹੈ।
State management libraries ਸਿਰਫ਼ state ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਬਾਰੇ ਨਹੀਂ ਹਨ। ਉਹ ਗੁੰਝਲਦਾਰਤਾ (complexity) ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਬਾਰੇ ਹਨ।
ਹਰ API ਨੂੰ ਯਾਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਾ ਬੰਦ ਕਰੋ। ਉਸ ਸਮੱਸਿਆ ਨੂੰ ਦੇਖਣਾ ਸ਼ੁਰੂ ਕਰੋ ਜਿਸ ਨੂੰ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਉਹ tool ਕਰ ਰਿਹਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਸਮੱਸਿਆ ਨੂੰ ਸਮਝ ਲੈਂਦੇ ਹੋ, ਤਾਂ tool ਦਾ ਮਤਲਬ ਸਮਝ ਆ ਜਾਂਦਾ ਹੈ।
Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11