रेडक्स में सर्वर के लिए डेटाबेस

पिछले पाठ में, हमने msw स्थापित किया था, जो हमारे एप्लिकेशन की सर्वर के साथ काम करने का अनुकरण करने में हमारी मदद करेगा। और शुरुआत में हम चाहेंगे कि एप्लिकेशन शुरू होते ही सर्वर पर मौजूद डेटा लोड हो जाए।

आइए हम उत्पादों वाला हमारा एप्लिकेशन खोलें, और उसमें server.js फ़ाइल खोलें। यहाँ हमारे पास पहले से ही पिछले पाठ की कुछ कोड की पंक्तियाँ मौजूद हैं।

और पहली बात जो हमें खुद से पूछनी चाहिए: डेटा आमतौर पर कहाँ संग्रहीत होता है? हाँ, बेशक डेटाबेस में, हम बिना सोचे जवाब देंगे। इसलिए आइए एक और शानदार टूल का उपयोग करें, जो हमें हमारे डेटा का मॉडल बनाने की अनुमति देगा, और साथ ही ऐसा बना देगा कि जैसे हम एक वास्तविक SQL डेटाबेस के साथ काम कर रहे हैं।

जो टूल इसमें हमारी मदद करेगा - वह है लाइब्रेरी @mswjs/data. इसे इंस्टॉल करने के लिए, टर्मिनल में निम्नलिखित कमांड डालें:

npm install @mswjs/data --save-dev

अब server.js फ़ाइल में हमें आवश्यक चीज़ें इम्पोर्ट करें:

import { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

और हमारा अँगूठी डेटाबेस बनाएँगे। इसके लिए हम फ़ंक्शन factory का उपयोग करेंगे। हम इसे इम्पोर्ट की पंक्तियों के नीचे और वर्कर को एक्सपोर्ट करने से पहले करेंगे:

export const db = factory({})

और हम इसमें कौन सा डेटा संग्रहीत करेंगे? सर्वर से हमें उत्पाद, विक्रेता और उपयोगकर्ताओं की प्रतिक्रियाएँ प्राप्त होनी चाहिए। मतलब हमारे डेटाबेस में हमें तीन मॉडल बनाने होंगे, जिन्हें factory ऑब्जेक्ट्स के रूप में स्वीकार करता है:

export const db = factory({
	product: {},
	seller: {},
	reaction: {},
})

एक वास्तविक SQL डेटाबेस की तरह ही हर मॉडल का एक primary key होना चाहिए। परंपरागत रूप से, हम ऐसे फ़ील्ड के रूप में id को नियुक्त करेंगे, जिसे उत्पन्न करने के लिए हम उसी nanoid लाइब्रेरी का उपयोग करेंगे:

export const db = factory({
	product: {
		id: primaryKey(nanoid),
	},
	seller: {
		id: primaryKey(nanoid),
	},
	reaction: {
		id: primaryKey(nanoid),
	},
})

फ़ाइल की शुरुआत में इम्पोर्ट की पंक्तियों में nanoid को जोड़ना न भूलें:

import { nanoid } from '@reduxjs/toolkit'

अगले पाठ में हम अपने मॉडलों को आवश्यक फ़ील्ड्स से पूरक करेंगे।

अपना छात्रों वाला एप्लिकेशन खोलें। इस पाठ की सामग्री से परिचित होने के बाद, अपने एप्लिकेशन के लिए @mswjs/data इंस्टॉल करें।

इसके बाद डेटाबेस मॉडल db बनाएँ फ़ंक्शन factory की सहायता से। इसे तीन ऑब्जेक्ट (student, teacher, vote) पास करें आपके डेटा के लिए, जैसे कि पाठ में दिखाया गया है।