Ajouter des données dans le stockage avec React Router

Dans cette leçon, nous allons nous occuper de l'ajout d'un produit dans le stockage. Pour commencer, nous avons besoin d'une fonction createProduct pour créer un produit, ajoutons-la dans forStorage.js après la fonction getProducts :

forStorage.jsexport async function createProduct() {}

D'abord, nous ajoutons à nouveau someNetwork :

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

Ensuite, nous aurons besoin d'un id unique pour chaque produit, vous avez déjà rencontré cela dans le tutoriel React. Utilisons pour cela la bibliothèque nanoid. Entrons la commande suivante dans le terminal :

terminalnpm install --save nanoid

Importons la bibliothèque dans forStorage.js :

forStorage.jsimport { nanoid } from 'nanoid'

Disons que nous aurons des id de 6 caractères :

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

Initialement, lors de la création du produit, nous aurons seulement id dans l'objet. Appelons getProducts, ajoutons le produit généré et mettons à jour la liste de nos produits dans le stockage. Terminé :

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
  let product = { id };
  let products = await getProducts();
  products.unshift(product);
  await setProducts(products);
  return product;
}

La fonction pour mettre à jour la liste dans le stockage sera la suivante (nous y mettrons les produits sous la clé products), plaçons-la après la fonction createProduct :

forStorage.jsfunction setProducts(products) {
  return localforage.setItem('products', products);
}