Adăugarea datelor în stocarea în React Router

În această lecție ne vom ocupa de adăugarea unui produs în stocare. Pentru început avem nevoie de o funcție createProduct pentru crearea produsului, să o adăugăm în forStorage.js după funcția getProducts:

export async function createProduct() {}

Mai întâi adăugăm din nou someNetwork:

export async function createProduct() {
	await someNetwork();
}

Iar apoi vom avea nevoie de un id unic pentru fiecare produs, ați mai întâlnit asta în tutorialul React. Vom folosi pentru aceasta biblioteca nanoid. Introducem în terminal următoarea comandă:

npm install --save nanoid

Importăm în forStorage.js biblioteca:

import { nanoid } from 'nanoid'

Să avem id cu 6 caractere:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

Inițial la crearea produsului vom avea în obiect doar id. Apelăm getProducts, adăugăm produsul generat și actualizăm lista noastră de produse în stocare. Gata:

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;
}

Funcția pentru actualizarea listei în stocare va fi următoarea (vom introduce în ea produsele sub cheia products), să o plasăm după funcția createProduct:

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

Luați aplicația creată de dvs. în sarcinile din lecțiile trecute. Folosind materialele lecției, scrieți în forStorage.js funcția createStudent și setStudents pentru adăugarea datelor studenților în stocare.