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

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

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

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

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

terminalnpm install @mswjs/data --save-dev

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

api/server.jsimport { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

และสร้างฐานข้อมูลจำลองของเรา ขึ้นมา สำหรับสิ่งนี้เราจะใช้ฟังก์ชัน factory เราจะทำด้านล่างหลัง บรรทัด import และก่อนการ export worker:

api/server.jsexport const db = factory({})

และข้อมูลอะไรที่เราจะเก็บไว้ในนั้น? จากเซิร์ฟเวอร์เราควรได้รับผลิตภัณฑ์ ผู้ขาย และปฏิกิริยาของผู้ใช้ ดังนั้น ในฐานข้อมูลของเราต้องสร้าง โมเดลสามตัว ซึ่ง factory รับในรูปแบบของอ็อบเจกต์:

api/server.jsexport const db = factory({
  product: {},
  seller: {},
  reaction: {},
})

เหมือนกับในฐานข้อมูล SQL จริงทุกประการ แต่ละโมเดลของเราต้องมี primary key ตามธรรมเนียม เราจะกำหนดให้ฟิลด์ id เป็นเช่นนั้น ซึ่งเราจะสร้างโดยใช้ไลบรารี nanoid เหมือนเดิม:

api/server.jsexport const db = factory({
  product: {
    id: primaryKey(nanoid),
  },
  seller: {
    id: primaryKey(nanoid),
  },
  reaction: {
    id: primaryKey(nanoid),
  },
})

อย่าลืมเพิ่ม nanoid ในบรรทัด import ที่ด้านบนของไฟล์:

api/server.jsimport { nanoid } from '@reduxjs/toolkit'

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