Pangkalan Data untuk Pelayan dalam Redux

Dalam pelajaran lepas, kami telah memasang msw, yang akan membantu kami meniru kerja aplikasi kami dengan pelayan. Dan untuk permulaan kami ingin memuatkan data sedia ada pada pelayan apabila aplikasi dilancarkan.

Mari buka aplikasi produk kami, dan dalamnya fail server.js. Di sini kami sudah mempunyai beberapa baris kod dari pelajaran lepas.

Dan perkara pertama yang perlu kita tanya diri sendiri: di mana biasanya data disimpan? Ya, sudah tentu dalam pangkalan data, kami akan jawab tanpa berfikir. Oleh itu mari kita gunakan satu lagi alat hebat, yang akan membolehkan kami membuat model data kami, dan juga membuat seolah-olah kami berurusan dengan pangkalan SQL sebenar.

Alat yang akan membantu kami dalam hal ini - ialah pustaka @mswjs/data. Untuk memasukkannya, taip dalam terminal perintah berikut:

terminalnpm install @mswjs/data --save-dev

Sekarang import dalam fail server.js perkara yang kami perlukan:

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

Dan mari buat pangkalan data improvisasi kami. Untuk ini kami akan menggunakan fungsi factory. Kami akan lakukan ini di bawah baris import dan sebelum export worker:

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

Dan data apa yang akan kami simpan di dalamnya? Dari pelayan kami sepatutnya menerima produk, penjual dan reaksi pengguna. Oleh itu dalam pangkalan data kami, kami perlu mencipta tiga model, yang diterima oleh factory dalam bentuk objek:

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

Seperti dalam pangkalan data SQL sebenar, setiap model kami mesti mempunyai primary key. Secara tradisinya, kami akan melantik medan id sebagai medan tersebut, yang akan dijana oleh pustaka nanoid yang sama:

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

Jangan lupa untuk menambah nanoid dalam barisan import di awal fail:

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

Dalam pelajaran seterusnya, kami akan melengkapkan model kami dengan medan yang diperlukan.