Palvelimen tietokanta Reduxissa

Edellisellä tunnilla asensimme msw:n, joka auttaa meitä simuloimaan sovelluksemme toimintaa palvelimen kanssa. Aluksi halusimme ladata sovelluksen käynnistyessä palvelimella jo olevat tiedot.

Avataan tuotesovelluksemme, ja siellä tiedosto server.js. Tässä meillä on jo pari koodiriviä edelliseltä tunnilta.

Ja ensimmäinen asia, joka meidän pitää kysyä itseltämme: missä tiedot yleensä säilytetään? Kyllä, tietysti tietokannassa, vastaamme ajattelematta. Siksi käytetään toista hienoa työkalua, joka antaa meidän luoda tietomme mallin, ja myös tehdä niin kuin työskentelisimme aidon SQL-tietokannan kanssa.

Työkalu, joka auttaa meitä tässä - on kirjasto @mswjs/data. Asentaaksesi sen, kirjoita terminaaliin seuraava komento:

npm install @mswjs/data --save-dev

Nyt tuodaan tiedostoon server.js tarvitsemamme asiat:

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

Ja luodaan improvisoitu tietokantamme. Tätä varten käytämme funktiota factory. Teemme sen alla import-rivien jälkeen ja ennen workerin vientiä:

export const db = factory({})

Mitä tietoja siinä säilytämme? Palvelimelta meidän pitää saada tuotteita, myyjiä ja käyttäjäreaktioita. Siis tietokannassamme meidän pitää luoda kolme mallia, jotka factory ottaa vastaan objekteina:

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

Kuten aidoissa SQL-tietokannoissa, jokaisen mallimme täytyy olla primary key. Perinteisesti määritämme tällaiseksi kentäksi id:n, jota luomaan käytämme samaa nanoid-kirjastoa:

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

Älä unohda lisätä nanoid import- riveille tiedoston alussa:

import { nanoid } from '@reduxjs/toolkit'

Seuraavalla tunnilla täydennämme mallejamme tarvittavilla kentillä.

Avaa opiskelijasovelluksesi. Tutkittuaan tämän tunnin materiaalin, asenna @mswjs/data sovellukseesi.

Seuraavaksi luo tietokantamalli db avustamalla funktiolla factory. Anna sille kolme objektia (student, teacher, vote) tiedoillesi, kuten oppitunnilla on näytetty.