Redux-ի սերվերի տվյալների բազա

Նախորդ դասին մենք տեղադրեցինք msw, որը կօգնի մեզ նմանակել մեր հավելվածի աշխատանքը սերվերի հետ: Եվ սկզբից մենք ցանկանում էինք, որ հավելվածը գործարկվելիս բեռնաթափի սերվերում արդեն առկա տվյալները:

Եկեք բացենք մեր ապրանքների հավելվածը, իսկ դրա մեջ՝ server.js ֆայլը: Այստեղ մեզ մոտ արդեն կա մի քանի տող կոդ՝ նախորդ դասից:

Եվ առաջինը, ինչ մենք պետք է ինքներս մեզ հարցնենք. որտեղ սովորաբար պահվում են տվյալները: Այո, իհարկե տվյալների բազայում, մենք կպատասխանենք առանց մտածելու: Ուստի եկեք օգտագործենք ևս մեկ հիանալի գործիք, որը մեզ կթույլատրի ստեղծել մեր տվյալների մոդելը, ինչպես նաև անել այնպես, որ կարծես թե մենք աշխատում ենք իրական SQL-բազայի հետ:

Գործիքը, որ այս հարցում կօգնի մեզ - սա @mswjs/data գրադարանն է: Այն տեղադրելու համար, մուտքագրեք տերմինալում հետևյալ հրամանը:

npm install @mswjs/data --save-dev

Այժմ ներմուծենք server.js ֆայլում մեզ անհրաժեշտ բաները.

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

Եվ կստեղծենք մեր իմպրովիզացված բազա տվյալները: Դրա համար մենք կօգտագործենք ֆունկցիան factory: Մենք դա կանենք ներքևում՝ ներմուծման տողերից հետո և worker-ի արտահանումից առաջ.

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) ձեր տվյալների համար, նմանությամբ, ինչպես ցույց է տրված դասում: