การสร้างอ็อบเจ็กต์ข้อมูลสินค้าใน Redux

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

มาเปิดแอปพลิเคชันสินค้าของเรา และในนั้นเปิดไฟล์ server.js ด้านล่างหลังจาก ฟังก์ชัน getRandInt มาเขียนฟังก์ชันของเรา createProductData:

const createProductData = () => {}

ตอนนี้มากำหนดคุณสมบัติที่เราต้องการ ค่า สำหรับ name, price และ amount เราจะสร้างโดยใช้ getRandInt ซึ่งเราเขียนไว้ในบทเรียนที่แล้ว:

const createProductData = () => {
	return {
		name: `Product${getRandInt(0, 100)}`,
		price: getRandInt(100, 2000),
		amount: getRandInt(1, 50),
	}
}

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

npm install @faker-js/faker --save-dev

แล้วนำเข้าในไฟล์ของเรา:

import { faker } from '@faker-js/faker'

ลองใช้มันสร้างประโยค ที่มีข้อความ "ตัวปลอม" ที่รู้จักกันดี คือ 'Lorem ipsum' ให้ คำอธิบายประกอบด้วย 3 ถึง 5 ประโยคแบบนั้น:

const createProductData = () => {
	return {
		name: `Product${getRandInt(0, 100)}`,
		desc: faker.lorem.sentences({ min: 3, max: 5 }),
		price: getRandInt(100, 2000),
		amount: getRandInt(1, 50),
	}
}

ตอนนี้เพิ่มฟิลด์รีแอคชั่นในอ็อบเจ็กต์ของเรา กำหนดค่าเป็นอ็อบเจ็กต์ที่สร้าง ในที่นั้นด้วยคำสั่ง create (รีแอคชั่น ในนั้นจะเป็น 0 ก่อน):

const createProductData = () => {
	return {
		name: `Product${getRandInt(0, 100)}`,
		desc: faker.lorem.sentences({ min: 3, max: 5 }),
		price: getRandInt(100, 2000),
		amount: getRandInt(1, 50),
		reactions: db.reaction.create(),
	}
}

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

const createProductData = (seller) => {
	return {
		name: `Product${getRandInt(0, 100)}`,
		desc: faker.lorem.sentences({ min: 3, max: 5 }),
		price: getRandInt(100, 2000),
		amount: getRandInt(1, 50),
		reactions: db.reaction.create(),
		seller,
	}
}

เปิดแอปพลิเคชันนักเรียนของคุณ หลังจากศึกษาบทเรียนนี้แล้ว เขียนฟังก์ชันสำหรับสร้างอ็อบเจ็กต์ ข้อมูลนักเรียน