Basis Data untuk Server di Redux

Pada pertemuan sebelumnya, kita telah menginstal msw, yang akan membantu kita meniru pekerjaan aplikasi kita dengan server. Dan untuk memulainya kita ingin memuat data yang sudah ada di server saat aplikasi dijalankan.

Mari buka aplikasi produk kita, dan di dalamnya file server.js. Di sini kita sudah memiliki beberapa baris kode dari pertemuan sebelumnya.

Dan pertama-tama, yang harus kita tanyakan pada diri sendiri: di mana biasanya data disimpan? Ya, tentu saja di basis data, jawab kita tanpa berpikir. Oleh karena itu, mari gunakan alat keren lainnya, yang memungkinkan kita membuat model data kita, dan juga membuat seolah-olah kita bekerja dengan basis data SQL sungguhan.

Alat yang akan membantu kita dalam hal ini - adalah pustaka @mswjs/data. Untuk menginstalnya, ketik di terminal perintah berikut:

npm install @mswjs/data --save-dev

Sekarang impor di file server.js hal-hal yang kita butuhkan:

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

Dan buatlah basis data improvisasi kita. Untuk ini kita akan menggunakan fungsi factory. Kita akan melakukannya di bawah baris impor dan sebelum mengekspor worker:

export const db = factory({})

Dan data apa yang akan kita simpan di dalamnya? Dari server kita harus mendapatkan produk, penjual, dan reaksi pengguna. Artinya di basis data kita, kita harus membuat tiga model, yang diterima oleh factory dalam bentuk objek:

export const db = factory({
	product: {},
	seller: {},
	reaction: {},
})

Seperti di basis data SQL sungguhan, setiap model kita harus memiliki primary key. Secara tradisional, kita akan menetapkan bidang id sebagai kunci tersebut, yang akan kita generate dengan pustaka nanoid yang sama:

export const db = factory({
	product: {
		id: primaryKey(nanoid),
	},
	seller: {
		id: primaryKey(nanoid),
	},
	reaction: {
		id: primaryKey(nanoid),
	},
})

Jangan lupa menambahkan nanoid di baris impor di awal file:

import { nanoid } from '@reduxjs/toolkit'

Pada pelajaran berikutnya, kita akan melengkapi model-model kita dengan bidang-bidang yang diperlukan.

Buka aplikasi Anda dengan data siswa. Setelah mempelajari materi pelajaran ini, instal @mswjs/data untuk aplikasi Anda.

Selanjutnya buat model basis data db menggunakan fungsi factory. Berikan tiga objek (student, teacher, vote) untuk data Anda, seperti yang ditunjukkan dalam pelajaran.