Adición de datos al almacenamiento en React Router

En esta lección nos ocuparemos de agregar un producto al almacenamiento. Para empezar necesitamos una función createProduct para crear un producto, agreguémosla en forStorage.js después de la función getProducts:

forStorage.jsexport async function createProduct() {}

Primero agregamos nuevamente someNetwork:

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

Y luego necesitaremos una id única para cada producto, ya te has encontrado con esto en el tutorial de React. Usemos para esto la biblioteca nanoid. Introduzcamos en el terminal el siguiente comando:

terminalnpm install --save nanoid

Importemos en forStorage.js la biblioteca:

forStorage.jsimport { nanoid } from 'nanoid'

Que tengamos id de 6 caracteres:

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

Inicialmente al crear el producto tendremos en el objeto solo id. Llamemos getProducts, agreguemos el producto generado y actualicemos la lista de nuestros productos en el almacenamiento. Listo:

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 función para actualizar la lista en el almacenamiento será la siguiente (introduciremos en él productos bajo la clave products), coloquémosla después de la función createProduct:

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