Angular Academy · पाठ

SignalStore बनाना

signalStore और withState से अवस्था परिभाषित करें

पाठ 1, कुल 4 में से13 चरण

SignalStore बनाना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

SignalStore क्या है

NgRx SignalStore, एंगुलर सिग्नल पर आधारित, हल्का स्थिति-प्रबंधन समाधान है। आप सुविधाओं से स्टोर बनाते हैं, जैसे withState, withComputed और withMethods।

इंस्टॉल करना

SignalStore, @ngrx/signals पैकेज में उपलब्ध है। इसे अपने एंगुलर प्रोजेक्ट में जोड़ें, फिर आवश्यक निर्माण-खंड इम्पोर्ट करें।

// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';

signalStore फ़ैक्टरी

signalStore() एक इंजेक्ट किए जा सकने वाला वर्ग लौटाता है। स्थिति और व्यवहार का वर्णन करने वाली सुविधाएँ पास करें। डिफ़ॉल्ट रूप से स्टोर रूट में उपलब्ध कराया जाता है।

export const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 })
);

withState

withState(initial) प्रारंभिक स्थिति परिभाषित करता है। प्रत्येक शीर्ष-स्तरीय प्रॉपर्टी स्टोर पर एक सिग्नल बन जाती है, इसलिए store.count एक ऐसा सिग्नल है जिसे आप store.count() के रूप में कॉल करते हैं।

withState({
  count: 0,
  user: null as User | null,
  items: [] as Item[]
});

स्टोर को इंजेक्ट करना

फ़ैक्टरी एक इंजेक्ट किए जा सकने वाला वर्ग लौटाती है, इसलिए आप इसे किसी भी सेवा की तरह इंजेक्ट कर सकते हैं और टेम्पलेट में इसके स्थिति-सिग्नल पढ़ सकते हैं।

@Component({
  template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

patchState

patchState सहायक फ़ंक्शन से SignalStore की स्थिति अपडेट करें। यह स्टोर के साथ आंशिक स्थिति ऑब्जेक्ट या अपडेटर फ़ंक्शन स्वीकार करता है और उन्हें अपरिवर्तनीय ढंग से लागू करता है।

import { patchState } from '@ngrx/signals';

patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));

सिग्नल के रूप में स्थिति के हिस्से

स्थिति की हर कुंजी अलग-अलग सिग्नल के रूप में उपलब्ध होती है। एक हिस्से को पढ़ने से आपका संबंध अन्य हिस्सों से नहीं जुड़ता, और टेम्पलेट केवल उन्हीं हिस्सों के लिए अपडेट होते हैं जिन्हें वे पढ़ते हैं।

// given withState({ count: 0, name: '' })
store.count();  // number signal
store.name();   // string signal

स्थिति का प्रकार निर्धारित करना

नल योग्य या ऐरे फ़ील्ड के लिए अपनी स्थिति का प्रकार स्पष्ट रूप से निर्धारित करें, ताकि SignalStore सही सिग्नल प्रकारों का अनुमान लगा सके। प्रारंभिक ऑब्जेक्ट में as कास्ट का उपयोग करें।

type State = { user: User | null; loading: boolean };

withState<State>({ user: null, loading: false });

स्थानीय बनाम रूट में उपलब्ध

घटक-सीमित स्टोर बनाने के लिए providedIn को छोड़ दें; स्टोर को घटक के providers में जोड़ें। इससे प्रत्येक घटक इंस्टेंस को अपनी अलग स्थिति मिलती है।

@Component({
  providers: [CounterStore]
})
export class WidgetComponent {
  store = inject(CounterStore);
}

सुविधाओं का संयोजन

SignalStore की शक्ति संयोजन में है: कई सुविधाओं की सूची दें और वे एक ही स्टोर में मिल जाती हैं। क्रम महत्वपूर्ण है, क्योंकि बाद की सुविधाएँ पहले वाली सुविधाओं को पढ़ सकती हैं।

export const TodoStore = signalStore(
  withState({ todos: [] as Todo[] })
  // withComputed(...), withMethods(...) added next
);

कोई अतिरिक्त ढाँचा नहीं

पारंपरिक Redux-शैली के NgRx (एक्शन, रिड्यूसर, इफ़ेक्ट और चयनकर्ता) के विपरीत, SignalStore स्थिति और तर्क को एक घोषणात्मक स्टोर में साथ रखता है और इसमें बहुत कम अतिरिक्त ढाँचा होता है।

त्वरित जाँच

SignalStore की मूल बातों की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने signalStore() और withState से SignalStore बनाया, स्थिति के हिस्सों को सिग्नल के रूप में पढ़ा, patchState के माध्यम से उन्हें अपरिवर्तनीय ढंग से अपडेट किया, और रूट में उपलब्ध तथा घटक-सीमित स्टोर के बीच चयन किया। अगला विषय: परिकलित मान और विधियाँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “SignalStore बनाना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “SignalStore बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“SignalStore बनाना” में मैं क्या सीखूँगा?

signalStore और withState से अवस्था परिभाषित करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“SignalStore बनाना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ