12 KiB
ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 4: ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸੰਕਲਪ
ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼
ਪਰਿਚਯ
ਜਿਵੇਂ ਜਿਵੇਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਧਦੀ ਹੈ, ਸਾਰੇ ਡਾਟਾ ਫਲੋਜ਼ ਦਾ ਟ੍ਰੈਕ ਰੱਖਣਾ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਜਾਂਦਾ ਹੈ। ਕਿਹੜਾ ਕੋਡ ਡਾਟਾ ਲੈਂਦਾ ਹੈ, ਕਿਹੜਾ ਪੇਜ ਇਸਨੂੰ ਵਰਤਦਾ ਹੈ, ਕਿੱਥੇ ਅਤੇ ਕਦੋਂ ਇਸਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ...ਇਹ ਸੌਖਾ ਹੈ ਕਿ ਗੁੰਝਲਦਾਰ ਕੋਡ ਬਣ ਜਾਵੇ ਜੋ ਸੰਭਾਲਣਾ ਮੁਸ਼ਕਲ ਹੋਵੇ। ਇਹ ਖਾਸ ਕਰਕੇ ਸੱਚ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਪੇਜਾਂ ਵਿੱਚ ਡਾਟਾ ਸਾਂਝਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ ਯੂਜ਼ਰ ਡਾਟਾ। ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦਾ ਸੰਕਲਪ ਹਮੇਸ਼ਾ ਹੀ ਹਰ ਕਿਸਮ ਦੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਮੌਜੂਦ ਰਿਹਾ ਹੈ, ਪਰ ਜਿਵੇਂ ਵੈੱਬ ਐਪਸ ਦੀ ਜਟਿਲਤਾ ਵਧਦੀ ਜਾ ਰਹੀ ਹੈ, ਇਹ ਹੁਣ ਵਿਕਾਸ ਦੌਰਾਨ ਸੋਚਣ ਲਈ ਇੱਕ ਮੁੱਖ ਬਿੰਦੂ ਬਣ ਗਿਆ ਹੈ।
ਇਸ ਆਖਰੀ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਉਸ ਐਪ ਨੂੰ ਦੁਬਾਰਾ ਦੇਖਾਂਗੇ ਜੋ ਅਸੀਂ ਬਣਾਇਆ ਸੀ ਤਾਂ ਜੋ ਸਟੇਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਮੈਨੇਜ ਕੀਤਾ ਜਾਵੇ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਰਿਫ੍ਰੈਸ਼ ਨੂੰ ਕਿਸੇ ਵੀ ਸਮੇਂ ਸਹਿਯੋਗ ਮਿਲੇ ਅਤੇ ਯੂਜ਼ਰ ਸੈਸ਼ਨਜ਼ ਵਿੱਚ ਡਾਟਾ ਸਥਿਰ ਰਹੇ।
ਪੂਰਵ ਸ਼ਰਤ
ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਲਈ ਵੈੱਬ ਐਪ ਦੇ ਡਾਟਾ ਫੈਚਿੰਗ ਭਾਗ ਨੂੰ ਪੂਰਾ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ। ਤੁਹਾਨੂੰ Node.js ਨੂੰ ਇੰਸਟਾਲ ਕਰਨਾ ਅਤੇ ਸਰਵਰ API ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਚਲਾਉਣਾ ਵੀ ਲੋੜੀਂਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਮੈਨੇਜ ਕਰ ਸਕੋ।
ਤੁਸੀਂ ਟਰਮਿਨਲ ਵਿੱਚ ਇਹ ਕਮਾਂਡ ਚਲਾ ਕੇ ਜਾਂਚ ਸਕਦੇ ਹੋ ਕਿ ਸਰਵਰ ਠੀਕ ਤਰ੍ਹਾਂ ਚੱਲ ਰਿਹਾ ਹੈ:
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਨੂੰ ਦੁਬਾਰਾ ਸੋਚੋ
ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਐਪ ਵਿੱਚ ਸਟੇਟ ਦੇ ਇੱਕ ਬੁਨਿਆਦੀ ਸੰਕਲਪ ਨੂੰ ਗਲੋਬਲ account ਵੈਰੀਏਬਲ ਦੇ ਨਾਲ ਪੇਸ਼ ਕੀਤਾ ਸੀ, ਜੋ ਮੌਜੂਦਾ ਲੌਗਇਨ ਕੀਤੇ ਗਏ ਯੂਜ਼ਰ ਲਈ ਬੈਂਕ ਡਾਟਾ ਰੱਖਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਸਾਡੀ ਮੌਜੂਦਾ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਕੁਝ ਖਾਮੀਆਂ ਹਨ। ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਹੋਣ ਦੌਰਾਨ ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਕੀ ਹੁੰਦਾ ਹੈ?
ਮੌਜੂਦਾ ਕੋਡ ਵਿੱਚ 3 ਸਮੱਸਿਆਵਾਂ ਹਨ:
- ਸਟੇਟ ਸਥਿਰ ਨਹੀਂ ਹੈ, ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਰਿਫ੍ਰੈਸ਼ ਤੁਹਾਨੂੰ ਵਾਪਸ ਲੌਗਇਨ ਪੇਜ 'ਤੇ ਲੈ ਜਾਂਦਾ ਹੈ।
- ਕਈ ਫੰਕਸ਼ਨ ਹਨ ਜੋ ਸਟੇਟ ਨੂੰ ਮੋਡੀਫਾਈ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਜਿਵੇਂ ਐਪ ਵਧਦਾ ਹੈ, ਇਹ ਬਦਲਾਵਾਂ ਦਾ ਟ੍ਰੈਕ ਰੱਖਣਾ ਮੁਸ਼ਕਲ ਬਣਾ ਸਕਦਾ ਹੈ ਅਤੇ ਇੱਕ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਭੁੱਲਣਾ ਆਸਾਨ ਹੈ।
- ਸਟੇਟ ਸਾਫ ਨਹੀਂ ਹੁੰਦੀ, ਇਸ ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਲੌਗਆਉਟ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ ਤਾਂ ਖਾਤੇ ਦਾ ਡਾਟਾ ਅਜੇ ਵੀ ਉੱਥੇ ਹੁੰਦਾ ਹੈ ਭਾਵੇਂ ਤੁਸੀਂ ਲੌਗਇਨ ਪੇਜ 'ਤੇ ਹੋ।
ਅਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਇਨ੍ਹਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਅਪਡੇਟ ਕਰ ਸਕਦੇ ਹਾਂ, ਪਰ ਇਹ ਹੋਰ ਕੋਡ ਡੁਪਲੀਕੇਸ਼ਨ ਪੈਦਾ ਕਰੇਗਾ ਅਤੇ ਐਪ ਨੂੰ ਹੋਰ ਜਟਿਲ ਅਤੇ ਸੰਭਾਲਣਾ ਮੁਸ਼ਕਲ ਬਣਾ ਦੇਵੇਗਾ। ਜਾਂ ਅਸੀਂ ਕੁਝ ਮਿੰਟਾਂ ਲਈ ਰੁਕ ਸਕਦੇ ਹਾਂ ਅਤੇ ਆਪਣੀ ਰਣਨੀਤੀ ਨੂੰ ਦੁਬਾਰਾ ਸੋਚ ਸਕਦੇ ਹਾਂ।
ਅਸੀਂ ਇੱਥੇ ਅਸਲ ਵਿੱਚ ਕਿਹੜੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ?
ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਸਾਰੇ ਇਸ ਗੱਲ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਲੱਭਣ ਬਾਰੇ ਹੈ ਕਿ:
- ਐਪ ਵਿੱਚ ਡਾਟਾ ਫਲੋਜ਼ ਨੂੰ ਕਿਵੇਂ ਸਮਝਣਯੋਗ ਬਣਾਇਆ ਜਾਵੇ?
- ਸਟੇਟ ਡਾਟਾ ਨੂੰ ਹਮੇਸ਼ਾ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਦੇ ਨਾਲ (ਅਤੇ ਇਸਦੇ ਉਲਟ) ਕਿਵੇਂ ਸਿੰਕ ਵਿੱਚ ਰੱਖਿਆ ਜਾਵੇ?
ਇਹਨਾਂ ਦੀ ਦੇਖਭਾਲ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੋਰ ਕੋਈ ਵੀ ਸਮੱਸਿਆ ਜੋ ਤੁਹਾਡੇ ਕੋਲ ਹੋ ਸਕਦੀ ਹੈ, ਸ਼ਾਇਦ ਪਹਿਲਾਂ ਹੀ ਹੱਲ ਹੋ ਗਈ ਹੋਵੇ ਜਾਂ ਇਸਨੂੰ ਹੱਲ ਕਰਨਾ ਆਸਾਨ ਹੋ ਗਿਆ ਹੋਵੇ। ਇਨ੍ਹਾਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਕਈ ਸੰਭਾਵਿਤ ਤਰੀਕੇ ਹਨ, ਪਰ ਅਸੀਂ ਇੱਕ ਆਮ ਹੱਲ ਦੇ ਨਾਲ ਜਾਵਾਂਗੇ ਜੋ ਡਾਟਾ ਅਤੇ ਇਸਨੂੰ ਬਦਲਣ ਦੇ ਤਰੀਕਿਆਂ ਨੂੰ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ। ਡਾਟਾ ਫਲੋਜ਼ ਇਸ ਤਰ੍ਹਾਂ ਜਾਵੇਗਾ:
ਅਸੀਂ ਇੱਥੇ ਉਸ ਭਾਗ ਨੂੰ ਕਵਰ ਨਹੀਂ ਕਰਾਂਗੇ ਜਿੱਥੇ ਡਾਟਾ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਵਿਊ ਅਪਡੇਟ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ Reactive Programming ਦੇ ਹੋਰ ਉੱਚੇ ਸੰਕਲਪਾਂ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ। ਜੇ ਤੁਸੀਂ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣ ਲਈ ਤਿਆਰ ਹੋ, ਤਾਂ ਇਹ ਇੱਕ ਵਧੀਆ ਅਗਲਾ ਵਿਸ਼ਾ ਹੈ।
✅ ਬਾਜ਼ਾਰ ਵਿੱਚ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਲਈ ਕਈ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ Redux ਇੱਕ ਲੋਕਪ੍ਰਿਯ ਵਿਕਲਪ ਹੈ। ਇਸਦੇ ਸੰਕਲਪਾਂ ਅਤੇ ਪੈਟਰਨਜ਼ ਨੂੰ ਦੇਖੋ ਕਿਉਂਕਿ ਇਹ ਅਕਸਰ ਇਹ ਸਿੱਖਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੁੰਦਾ ਹੈ ਕਿ ਵੱਡੀਆਂ ਵੈੱਬ ਐਪਸ ਵਿੱਚ ਤੁਸੀਂ ਕਿਹੜੀਆਂ ਸੰਭਾਵਿਤ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਇਹ ਕਿਵੇਂ ਹੱਲ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ।
ਕੰਮ
ਅਸੀਂ ਕੁਝ ਰੀਫੈਕਟੋਰਿੰਗ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ। account ਡਿਕਲੇਰੇਸ਼ਨ ਨੂੰ ਬਦਲੋ:
let account = null;
ਇਸ ਨਾਲ:
let state = {
account: null
};
ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਸਾਰੇ ਐਪ ਡਾਟਾ ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਸਟੇਟ ਆਬਜੈਕਟ ਵਿੱਚ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨਾ। ਅਜੇ ਸਟੇਟ ਵਿੱਚ ਸਿਰਫ account ਹੈ ਇਸ ਲਈ ਇਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਹੀਂ ਬਦਲਦਾ, ਪਰ ਇਹ ਵਿਕਾਸ ਲਈ ਰਸਤਾ ਬਣਾਉਂਦਾ ਹੈ।
ਸਾਨੂੰ ਇਸਨੂੰ ਵਰਤਣ ਵਾਲੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਵੀ ਅਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ। register() ਅਤੇ login() ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ, account = ... ਨੂੰ state.account = ... ਨਾਲ ਬਦਲੋ;
updateDashboard() ਫੰਕਸ਼ਨ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ, ਇਹ ਲਾਈਨ ਸ਼ਾਮਲ ਕਰੋ:
const account = state.account;
ਇਹ ਰੀਫੈਕਟੋਰਿੰਗ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਸੁਧਾਰ ਨਹੀਂ ਲਿਆਉਂਦੀ, ਪਰ ਇਸਦਾ ਮਕਸਦ ਅਗਲੇ ਬਦਲਾਵਾਂ ਲਈ ਨੀਂਹ ਰੱਖਣਾ ਸੀ।
ਡਾਟਾ ਬਦਲਾਵਾਂ ਦਾ ਟ੍ਰੈਕ ਰੱਖੋ
ਹੁਣ ਜਦੋਂ ਅਸੀਂ ਡਾਟਾ ਸਟੋਰ ਕਰਨ ਲਈ state ਆਬਜੈਕਟ ਨੂੰ ਸਥਾਪਿਤ ਕਰ ਲਿਆ ਹੈ, ਅਗਲਾ ਕਦਮ ਅਪਡੇਟਸ ਨੂੰ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਨਾ ਹੈ। ਮਕਸਦ ਇਹ ਹੈ ਕਿ ਕਿਸੇ ਵੀ ਬਦਲਾਵਾਂ ਅਤੇ ਇਹ ਕਦੋਂ ਹੁੰਦੇ ਹਨ, ਇਸਦਾ ਟ੍ਰੈਕ ਰੱਖਣਾ ਆਸਾਨ ਬਣਾਇਆ ਜਾਵੇ।
... ਲੈਣ-ਦੇਣ ਸ਼ਾਮਲ ਕਰਨ ਵਾਲਾ ਡਾਇਲਾਗ ਲਾਗੂ ਕਰੋ
ਇਹ ਰੂਪਰੇਖਾ ਪੂਰੀ ਕਰਨ ਤੋਂ ਬਾਅਦ ਇੱਕ ਉਦਾਹਰਣ ਨਤੀਜਾ:
ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।