Base de données pour le serveur dans Redux

Lors de la dernière leçon, nous avons installé msw, qui nous aidera à simuler le fonctionnement de notre application avec le serveur. Et pour commencer, nous aimerions charger, au démarrage de l'application, les données déjà présentes sur le serveur.

Ouvrons notre application avec les produits, et dans celle-ci le fichier server.js. Ici, nous avons déjà quelques lignes de code de la leçon précédente.

Et la première question que nous devons nous poser : où les données sont-elles généralement stockées ? Oui, bien sûr dans une base de données, répondrons-nous sans réfléchir. C'est pourquoi utilisons un autre outil génial, qui nous permettra de créer un modèle de nos données, et aussi de faire comme si nous travaillions avec une vraie base SQL.

L'outil qui nous y aidera - est la bibliothèque @mswjs/data. Pour l'installer, tapez dans le terminal la commande suivante :

npm install @mswjs/data --save-dev

Maintenant, importons dans le fichier server.js les éléments dont nous avons besoin :

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

Et créons notre base de données improvisée. Pour cela, nous utiliserons la fonction factory. Nous le ferons après les lignes d'importation et avant l'exportation du worker :

export const db = factory({})

Et quelles données allons-nous y stocker ? Depuis le serveur, nous devons recevoir les produits, les vendeurs et les réactions des utilisateurs. Donc dans notre base de données, nous devons créer trois modèles, que factory accepte sous forme d'objets :

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

Comme dans une vraie base de données SQL, chaque modèle doit avoir une primary key. Traditionnellement, nous désignerons le champ id comme tel, que nous générerons avec la même bibliothèque nanoid :

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

N'oublions pas d'ajouter nanoid dans les lignes d'import au début du fichier :

import { nanoid } from '@reduxjs/toolkit'

Dans la leçon suivante, nous compléterons nos modèles avec les champs nécessaires.

Ouvrez votre application avec les étudiants. Après avoir pris connaissance du contenu de cette leçon, installez @mswjs/data pour votre application.

Ensuite, créez le modèle de base de données db à l'aide de la fonction factory. Passez-lui trois objets (student, teacher, vote) pour vos données, comme montré dans la leçon.