Βάση Δεδομένων για τον Διακομιστή στο Redux

Στο προηγούμενο μάθημα εγκαταστήσαμε το msw, το οποίο θα μας βοηθήσει να προσομοιώσουμε τη λειτουργία της εφαρμογής μας με τον διακομιστή. Και για αρχή θα θέλαμε να φορτώνουμε κατά την εκκίνηση της εφαρμογής τα δεδομένα που υπάρχουν ήδη στον διακομιστή.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο server.js. Εδώ έχουμε ήδη μερικές γραμμές κώδικα από το προηγούμενο μάθημα.

Και το πρώτο πράγμα που πρέπει να ρωτήσουμε τον εαυτό μας: πού συνήθως αποθηκεύονται τα δεδομένα; Ναι, φυσικά στη βάση δεδομένων, θα απαντήσουμε χωρίς δεύτερη σκέψη. Γι' αυτό ας χρησιμοποιήσουμε ένα ακόμη εξαιρετικό εργαλείο, το οποίο θα μας επιτρέψει να δημιουργήσουμε το μοντέλο των δεδομένων μας, και επίσης να κάνουμε να φαίνεται σαν να δουλεύουμε με πραγματική SQL βάση.

Το εργαλείο που θα μας βοηθήσει σε αυτό - είναι η βιβλιοθήκη @mswjs/data. Για να την εγκαταστήσετε, πληκτρολογήστε στο terminal την ακόλουθη εντολή:

npm install @mswjs/data --save-dev

Τώρα εισάγουμε στο αρχείο server.js τα απαραίτητα πράγματα:

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

Και θα δημιουργήσουμε την αυτοσχέδια βάση δεδομένων μας. Για αυτό θα χρησιμοποιήσουμε τη συνάρτηση factory. Θα το κάνουμε αυτό κάτω από τις γραμμές εισαγωγής και πριν την εξαγωγή του worker:

export const db = factory({})

Και ποια δεδομένα θα αποθηκεύουμε σε αυτή; Από τον διακομιστή πρέπει να λαμβάνουμε προϊόντα, πωλητές και αντιδράσεις χρηστών. Επομένως στη βάση δεδομένων μας πρέπει να δημιουργήσουμε τρία μοντέλα, τα οποία δέχεται η factory σε μορφή αντικειμένων:

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 για την εφαρμογή σας.

Στη συνέχεια δημιουργήστε το μοντέλο βάσης δεδομένων db με τη βοήθεια της συνάρτησης factory. Περάστε της τρία αντικείμενα (student, teacher, vote) για τα δεδομένα σας, παρόμοια με όσα φαίνονται στο μάθημα.