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:

terminalnpm install @mswjs/data --save-dev

Nyt tuodaan tiedostoon server.js tarvitsemamme asiat:

api/server.jsimport { 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ä:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport const db = factory({
  product: {
    id: primaryKey(nanoid),
  },
  seller: {
    id: primaryKey(nanoid),
  },
  reaction: {
    id: primaryKey(nanoid),
  },
})

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

api/server.jsimport { nanoid } from '@reduxjs/toolkit'

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