Reduxサーバー用データベース

前回のレッスンでは、アプリケーションのサーバーとのやり取りをシミュレートするのに役立つmswをインストールしました。まずは、アプリケーション起動時にサーバー上に既にあるデータを読み込みたいと思います。

商品管理アプリケーションを開き、その中のファイルserver.jsを開いてください。ここには前回のレッスンからのコードが既に数行あります。

まず自問すべきことは：データは通常どこに保存されるでしょうか？もちろんデータベースです、と私たちは迷わず答えるでしょう。ですから、データモデルを作成し、あたかも本物のSQLデータベースを操作しているかのように見せることを可能にする、もう一つの素晴らしいツールを使ってみましょう。

これを実現するのに役立つツールは、@mswjs/dataライブラリです。インストールするには、ターミナルで次のコマンドを入力してください：

npm install @mswjs/data --save-dev

では、ファイルserver.jsに必要なものをインポートしましょう：

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

そして、私たちの模擬データベースを作成します。そのために、factory関数を使用します。これは、インポート文の後、ワーカーのエクスポートの前の行の下で行います：

export const db = factory({})

では、このデータベースにはどのようなデータを保存するのでしょうか？サーバーからは、商品、出品者、ユーザーのリアクションを取得する必要があります。つまり、データベースにはfactoryがオブジェクトとして受け取る3つのモデルを作成する必要があります：

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をインストールしてください。

次に、factory関数を使用して、データベースモデルdbを作成してください。レッスンで示したように、3つのオブジェクト（student、teacher、vote）を渡してください。