Baza de date pentru server în Redux

În lecția anterioară am instalat msw, care ne va ajuta să simulăm funcționarea aplicației noastre cu serverul. Și pentru început am dori să încărcăm la pornirea aplicației datele care există deja pe server.

Să deschidem aplicația noastră cu produsele, iar în ea fișierul server.js. Aici avem deja câteva rânduri de cod din lecția anterioară.

Și primul lucru pe care ar trebui să ni-l întrebăm: unde sunt de obicei stocate datele? Da, desigur în baza de date, vom răspunde fără să ne gândim. Prin urmare să folosim încă un instrument grozav, care ne va permite să creăm modelul datelor noastre și, de asemenea, să facem astfel încât să pară că lucrăm cu o bază de date SQL reală.

Instrumentul care ne va ajuta în acest sens - este biblioteca @mswjs/data. Pentru a o instala, introduceți în terminal următoarea comandă:

npm install @mswjs/data --save-dev

Acum importați în fișierul server.js lucrurile de care avem nevoie:

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

Și vom crea baza noastră de date improvizată. Pentru aceasta vom folosi funcția factory. Vom face acest lucru mai jos după rândurile cu import și înainte de exportul worker-ului:

export const db = factory({})

Și ce date vom stoca în ea? De la server ar trebui să primim produse, vânzători și reacțiile utilizatorilor. Prin urmare în baza noastră de date ar trebui să creăm trei modele, pe care factory le acceptă sub formă de obiecte:

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

La fel ca într-o bază de date SQL reală, fiecare model trebuie să aibă primary key. În mod tradițional, vom desemna câmpul id ca atare, pe care îl vom genera cu aceeași bibliotecă nanoid:

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

Să nu uităm să adăugăm nanoid în rândurile de import de la începutul fișierului:

import { nanoid } from '@reduxjs/toolkit'

În lecția următoare vom completa modelele noastre cu câmpurile necesare.

Deschideți aplicația voastră cu studenții. După ce v-ați familiarizat cu materialul acestei lecții, instalați @mswjs/data pentru aplicația dvs.

Apoi creați modelul bazei de date db cu ajutorul funcției factory. Transmiteți-i trei obiecte (student, teacher, vote) pentru datele dvs., similar cu modul în care este arătat în lecție.