Databasis vir die bediener in Redux

Op die vorige les het ons msw geïnstalleer, wat ons sal help om die werking van ons toepassing met die bediener na te boots. En om mee te begin wil ons graag die data wat reeds op die bediener is laai wanneer die toepassing begin.

Kom ons maak ons produktoepassing oop, en daarin die lêer server.js. Hier het ons reeds 'n paar reëls kode vanaf die vorige les.

En die eerste ding wat ons onsself moet vra: waar word data gewoonlik gestoor? Ja, natuurlik in 'n databasis, sal ons antwoord sonder om te dink. Daarom kom ons gebruik nog een gawe instrument, wat ons sal toelaat om ons datamodel te skep, en ook om dit te laat lyk asof ons met 'n regte SQL-databasis werk.

Die instrument wat ons hierin sal help - is die biblioteek @mswjs/data. Om dit te installeer, tik in die terminal die volgende opdrag:

npm install @mswjs/data --save-dev

Nou voer ons in die lêer server.js die nodige dinge in:

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

En skep ons geïmproviseerde databasis daarvoor. Om dit te doen sal ons die funksie factory gebruik. Ons sal dit hierna doen die reëls met die invoer en voor die uitvoer van die werker:

export const db = factory({})

En watter data sal ons daarin stoor? Van die bediener moet ons produkte, verkopers en gebruikersreaksies kry. Dus in ons databasis moet ons skep drie modelle wat factory as voorwerpe aanvaar:

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

Soos in 'n regte SQL-databasis moet elke ons model hê primary key. Tradisioneel sal ons so 'n veld aanstel id, wat ons sal genereer met dieselfde nanoid-biblioteek:

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

Ons moet nie vergeet om nanoid by die reëls van invoer aan die begin van die lêer by te voeg nie:

import { nanoid } from '@reduxjs/toolkit'

Op die volgende les sal ons ons modelle aanvul met die nodige velde.

Maak jou toepassing met studente oop. Nadat jy die materiaal van hierdie les nagegaan het, installeer @mswjs/data vir jou toepassing.

Skep vervolgens die databasismodel db met behulp van die funksie factory. Gee dit drie voorwerpe (student, teacher, vote) vir jou data, soortgelyk aan hoe getoon in die les.