ბაზა სერვერისთვის 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) თქვენი მონაცემებისთვის, ისე როგორც ეს ნაჩვენებია გაკვეთილზე.