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

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

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

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

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

terminalnpm install @mswjs/data --save-dev

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

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

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

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

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

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を追加するのを忘れないでください：

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

次のレッスンでは、必要なフィールドをモデルに追加していきます。