पता लगाएं कि आप अपने एस्ट्रो ऐप्स को सशक्त बनाने के लिए राज्य प्रबंधन का उपयोग कैसे कर सकते हैं।

एस्ट्रो फ्रेमवर्क के साथ एक एप्लिकेशन बनाते समय, आप सोच रहे होंगे कि एप्लिकेशन स्थिति को कैसे प्रबंधित किया जाए या इसे घटकों और फ्रेमवर्क के बीच कैसे साझा किया जाए। नैनो स्टोर्स एस्ट्रो के लिए सबसे अच्छे राज्य प्रबंधकों में से एक है, इस तथ्य के लिए धन्यवाद कि यह रिएक्ट, प्रीएक्ट, स्वेल्ट, सॉलिड, लिट, एंगुलर और वेनिला जेएस के साथ काम करता है।

जानें कि एस्ट्रो प्रोजेक्ट के भीतर राज्य का प्रबंधन कैसे करें। एक बुनियादी नोट लेने वाला एप्लिकेशन बनाने के लिए सरल चरणों का पालन करें जो राज्य प्रबंधन के लिए नैनो स्टोर्स का उपयोग करता है और एक रिएक्ट और सॉलिड.जेएस घटक के बीच अपनी स्थिति साझा करता है।

एस्ट्रो क्या है?

एस्ट्रो फ्रेमवर्क आपको रिएक्ट, प्रीएक्ट, वीयू या स्वेल्ट जैसे लोकप्रिय यूआई फ्रेमवर्क के शीर्ष पर वेब एप्लिकेशन बनाने की अनुमति देता है। फ्रेमवर्क का उपयोग करता है a घटक-आधारित वास्तुकला, इसलिए एस्ट्रो में प्रत्येक पृष्ठ में कई घटक होते हैं।

पेज लोड समय को तेज करने के लिए, फ्रेमवर्क क्लाइंट-साइड जावास्क्रिप्ट के उपयोग को कम करता है और इसके बजाय सर्वर पर पेजों को प्रीरेंडर करता है।

instagram viewer

एस्ट्रो को सामग्री-केंद्रित वेबसाइटों को प्रकाशित करने के लिए आदर्श उपकरण के रूप में डिज़ाइन किया गया था। ब्लॉग, लैंडिंग पेज, समाचार वेबसाइट और अन्य पेजों के बारे में सोचें जो अन्तरक्रियाशीलता से अधिक सामग्री पर ध्यान केंद्रित करते हैं। उन घटकों के लिए जिन्हें आप इंटरैक्टिव के रूप में चिह्नित करते हैं, फ्रेमवर्क केवल उस इंटरएक्टिविटी को सक्षम करने के लिए आवश्यक न्यूनतम जावास्क्रिप्ट भेजेगा।

स्थापना और सेटअप

यदि आपके पास पहले से ही कोई एस्ट्रो प्रोजेक्ट चल रहा है, तो इस अनुभाग को छोड़ दें।

लेकिन यदि आपके पास कोई एस्ट्रो प्रोजेक्ट नहीं है, तो आपको एक प्रोजेक्ट बनाना होगा। इसके लिए एकमात्र आवश्यकता है नोड.जे.एस आपकी स्थानीय विकास मशीन पर स्थापित।

एक बिल्कुल नया एस्ट्रो प्रोजेक्ट बनाने के लिए, अपना कमांड प्रॉम्प्ट लॉन्च करें, निर्देशिका में सीडी आप अपना प्रोजेक्ट बनाना चाहते हैं, तो निम्न कमांड चलाएँ:

npm create astro@latest

एस्ट्रो स्थापित करने और अपने प्रोजेक्ट के फ़ोल्डर नाम के लिए एक नाम प्रदान करने के लिए "y" उत्तर दें। आप एस्ट्रो का उल्लेख कर सकते हैं आधिकारिक सेट-अप ट्यूटोरियल यदि आप रास्ते में फंस गए हैं।

एक बार जब आप प्रोजेक्ट बनाना पूरा कर लें, तो निम्न कमांड का पालन करें (यह प्रोजेक्ट में रिएक्ट जोड़ता है):

npx astro add react

अंत में, निम्नलिखित कमांड चलाकर रिएक्ट के लिए नैनो स्टोर्स स्थापित करें:

npm i nanostores @nanostores/react

अभी भी अपने टर्मिनल पर, प्रोजेक्ट के रूट फ़ोल्डर में सीडी डालें और निम्नलिखित में से किसी भी कमांड के साथ एप्लिकेशन शुरू करें (इस पर निर्भर करता है कि आप इनमें से किसका उपयोग कर रहे हैं):

npm run dev

या:

yarn run dev

या:

pnpm run dev

जाओ http://localhost: 3000 अपनी वेबसाइट का पूर्वावलोकन देखने के लिए अपने वेब ब्राउज़र में।

आपके एस्ट्रो प्रोजेक्ट के पूरी तरह तैयार हो जाने के बाद, अगला कदम एप्लिकेशन डेटा के लिए एक स्टोर बनाना है।

नोट स्टोर बनाना

नाम की एक फ़ाइल बनाएं नोटस्टोर.जे.एस फ़ाइल के अंदर /src आपके एप्लिकेशन के रूट में निर्देशिका। इस फ़ाइल के अंदर, का उपयोग करें परमाणु() से कार्य करें nanostores नोट्स स्टोर बनाने के लिए:

import { atom } from"nanostores"
exportconst notes = atom([])
exportfunctionaddNote(note) {
 notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}

नोट जोड़े() फ़ंक्शन किसी नोट को अपने तर्क के रूप में लेता है और उसे नोट्स स्टोर के अंदर संग्रहीत करता है। डेटा उत्परिवर्तन से बचने के लिए नोट संग्रहीत करते समय यह स्प्रेड ऑपरेटर का उपयोग करता है। स्प्रेड ऑपरेटर एक है जावास्क्रिप्ट आशुलिपि वस्तुओं की प्रतिलिपि बनाने के लिए.

नोट लेने वाले ऐप का यूआई बनाना

यूआई में नोट एकत्र करने के लिए बस एक इनपुट और एक बटन शामिल होगा, जिस पर क्लिक करने पर नोट स्टोर में जुड़ जाएगा।

के अंदर स्रोत/घटक निर्देशिका, नामक एक नई फ़ाइल बनाएँ NoteAddButton.jsx. इसके बाद, फ़ाइल के अंदर निम्नलिखित कोड पेस्ट करें:

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')


return(
 <>


"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />


    

     {
     $notes.map((note, index) => {
  • {note}</li>
     })
     } 
     </ul>
     </>
     )
    }
    

    •

जैसे ही आप इनपुट में टाइप करते हैं यह कोड नोट को घटक की स्थिति में जोड़ देता है। फिर, जब आप बटन पर क्लिक करते हैं, तो यह नोट को स्टोर में सहेजता है। यह स्टोर से नोट भी लेता है और उन्हें एक अव्यवस्थित सूची में प्रदर्शित करता है। इस दृष्टिकोण के साथ, क्लिक करने के तुरंत बाद नोट पृष्ठ पर दिखाई देगा बचाना बटन।

अब आपके में पेज/index.astro फ़ाइल, आपको आयात करने की आवश्यकता है नोट जोड़ें बटन और इसे अंदर उपयोग करें टैग:

import NoteAddButton from"../components/NoteAddButton.jsx"

"Welcome to Astro.">


 </main>
</Layout>
// Other code

यदि आप अब अपने ब्राउज़र पर वापस जाते हैं, तो आपको पृष्ठ पर प्रस्तुत इनपुट तत्व और बटन मिलेगा। इनपुट में कुछ टाइप करें और क्लिक करें बचाना बटन। नोट तुरंत पृष्ठ पर दिखाई देगा और आपके ब्राउज़र को रीफ़्रेश करने के बाद भी पृष्ठ पर बना रहेगा।

दो ढांचों के बीच राज्य साझा करना

मान लीजिए कि आप रिएक्ट और सॉलिड.जेएस के बीच स्थिति साझा करना चाहते हैं। पहली चीज़ जो आपको करने की ज़रूरत है वह निम्नलिखित कमांड चलाकर अपने प्रोजेक्ट में सॉलिड जोड़ना है:

npx astro add solid

इसके बाद, चलाकर Solid.js के लिए नैनो स्टोर जोड़ें:

npm i nanostores @nanostores/solid

Solid.js में UI बनाने के लिए, अंदर जाएँ स्रोत/घटक निर्देशिका बनाएं और नाम से एक नई फ़ाइल बनाएं नोट्स.जे.एस. फ़ाइल खोलें और उसके अंदर नोट्स घटक बनाएं:

import {useStore} from"@nanostores/solid"
import {notes} from"../noteStore"
import {For} from"solid-js"
exportdefaultfunctionNotes() {
const $notes = useStore(notes)
return(
 <>
My notes</h1>
    


     {(note) => <li>{note}li>}
     </For>
     </ul> 
     </>
     )
    }

इस फ़ाइल में, आप स्टोर से नोट्स आयात करते हैं, प्रत्येक नोट के माध्यम से लूप करते हैं और इसे पृष्ठ पर प्रदर्शित करते हैं।

उपरोक्त दिखाने के लिए टिप्पणी Solid.js के साथ बनाया गया घटक, बस अपने पास जाएँ पेज/index.astro फ़ाइल, आयात नोट जोड़ें बटन और इसे अंदर उपयोग करें टैग:

import NodeAddButton from"../components/NoteAddButton.jsx"
import Nodes from"../components/Notes.jsx"

"Welcome to Astro.">



 </main>
</Layout>
// Other code

अब अपने ब्राउज़र पर वापस जाएं, इनपुट में कुछ टाइप करें और क्लिक करें बचाना बटन। नोट पृष्ठ पर दिखाई देगा और रेंडरर्स के बीच भी बना रहेगा।

एस्ट्रो की अन्य नई सुविधाएँ

इन तकनीकों का उपयोग करके, आप अपने एस्ट्रो एप्लिकेशन के अंदर स्थिति का प्रबंधन कर सकते हैं और इसे घटकों और ढांचे के बीच साझा कर सकते हैं। लेकिन एस्ट्रो में कई अन्य उपयोगी सुविधाएँ हैं जैसे डेटा संग्रह, HTML लघुकरण और समानांतर प्रतिपादन।