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:

export async function createProduct() {}

Primero agregamos nuevamente someNetwork:

export 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:

npm install --save nanoid

Importemos en forStorage.js la biblioteca:

import { nanoid } from 'nanoid'

Que tengamos id de 6 caracteres:

export 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:

export 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:

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

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, escriba en forStorage.js la función createStudent y setStudents para agregar datos de estudiantes al almacenamiento.