ฐานข้อมูลสำหรับเซิร์ฟเวอร์ใน Redux

ในบทเรียนที่แล้วเราได้ติดตั้ง msw ซึ่งจะช่วยเราจำลองการทำงาน ของแอปพลิเคชันของเรากับเซิร์ฟเวอร์ และสำหรับการเริ่มต้น เราต้องการให้โหลดข้อมูลที่มีอยู่บนเซิร์ฟเวอร์อยู่แล้ว เมื่อเริ่มต้นทำงานแอปพลิเคชัน

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรากัน และในนั้นคือไฟล์ server.js ที่นี่เรามี โค้ดสองสามบรรทัดจากบทเรียนที่แล้ว อยู่แล้ว

และสิ่งแรกที่เราต้องถามตัวเอง: โดยปกติแล้ว ข้อมูลถูกเก็บไว้ที่ไหน? ใช่แน่นอนในฐานข้อมูล เราจะตอบโดยไม่ต้องคิด ดังนั้น มาใช้อีกหนึ่งเครื่องมือที่ยอดเยี่ยม ซึ่งจะช่วยให้เราสร้างโมเดลของข้อมูลเรา และยังทำให้เหมือนกับว่าเรา ทำงานกับฐานข้อมูล SQL จริงๆ

เครื่องมือที่จะช่วยเราในเรื่องนี้คือ ไลบรารี @mswjs/data เพื่อติดตั้ง ให้พิมพ์ในเทอร์มินัล คำสั่งต่อไปนี้:

npm install @mswjs/data --save-dev

ตอนนี้ให้ import ในไฟล์ server.js สิ่งที่เราต้องการ:

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

และสร้างฐานข้อมูลจำลองของเรา ขึ้นมา สำหรับสิ่งนี้เราจะใช้ฟังก์ชัน factory เราจะทำด้านล่างหลัง บรรทัด import และก่อนการ export 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 ที่ด้านบนของไฟล์:

import { nanoid } from '@reduxjs/toolkit'

ในบทเรียนถัดไปเราจะเพิ่มเติมโมเดลของเรา ด้วยฟิลด์ที่จำเป็น

เปิดแอปพลิเคชันนักเรียนของคุณ หลังจากศึกษาบทเรียนนี้แล้ว ให้ติดตั้ง @mswjs/data สำหรับ แอปพลิเคชันของคุณ

ต่อไป ให้สร้างโมเดลฐานข้อมูล db โดยใช้ฟังก์ชัน factory ส่งอ็อบเจกต์สามตัว (student, teacher, vote) สำหรับ ข้อมูลของคุณ คล้ายกับที่แสดง ในบทเรียน