Cơ sở dữ liệu cho máy chủ trong Redux

Ở bài học trước, chúng ta đã cài đặt msw, công cụ sẽ giúp chúng ta mô phỏng hoạt động của ứng dụng với máy chủ. Và để bắt đầu, chúng ta muốn tải dữ liệu đã có trên máy chủ khi khởi động ứng dụng.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó là tệp server.js. Ở đây chúng ta đã có một vài dòng mã từ bài học trước.

Và điều đầu tiên chúng ta nên tự hỏi: dữ liệu thường được lưu trữ ở đâu? Vâng, tất nhiên trong cơ sở dữ liệu, chúng ta sẽ trả lời mà không cần suy nghĩ. Vì vậy, hãy sử dụng một công cụ tuyệt vời nữa, cho phép chúng ta tạo mô hình dữ liệu của mình, đồng thời làm cho nó giống như chúng ta đang làm việc với một cơ sở dữ liệu SQL thực sự.

Công cụ sẽ giúp chúng ta làm điều này - đó là thư viện @mswjs/data. Để cài đặt nó, hãy nhập vào terminal lệnh sau:

npm install @mswjs/data --save-dev

Bây giờ hãy nhập vào tệp server.js những thứ chúng ta cần:

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

Và chúng ta sẽ tạo ra cơ sở dữ liệu tạm thời của mình. Để làm điều này, chúng ta sẽ sử dụng hàm factory. Chúng ta sẽ thực hiện điều này bên dưới các dòng nhập và trước khi xuất worker:

export const db = factory({})

Và chúng ta sẽ lưu trữ dữ liệu gì trong đó? Từ máy chủ, chúng ta sẽ nhận được sản phẩm, người bán và phản ứng của người dùng. Vậy trong cơ sở dữ liệu của mình, chúng ta phải tạo ba mô hình mà factory chấp nhận dưới dạng các đối tượng:

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

Giống như trong một cơ sở dữ liệu SQL thực sự, mỗi mô hình của chúng ta phải có primary key. Theo truyền thống, chúng ta sẽ chỉ định trường id làm khóa chính, và chúng ta sẽ tạo ra nó bằng chính thư viện nanoid đó:

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

Đừng quên thêm nanoid vào các dòng nhập ở đầu tệp:

import { nanoid } from '@reduxjs/toolkit'

Trong bài học tiếp theo, chúng ta sẽ bổ sung các mô hình của mình với các trường cần thiết.

Mở ứng dụng sinh viên của bạn. Sau khi làm quen với tài liệu của bài học này, hãy cài đặt @mswjs/data cho ứng dụng của bạn.

Tiếp theo, tạo mô hình cơ sở dữ liệu db bằng hàm factory. Truyền cho nó ba đối tượng (student, teacher, vote) cho dữ liệu của bạn, tương tự như cách được hiển thị trong bài học.