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,
	}
}

あなたの生徒管理アプリケーションを開いてください。このレッスンの内容を確認した後、生徒データオブジェクトを作成する関数を書いてください。