Lägga till data i lagring i React Router

I den här lektionen ska vi fokusera på att lägga till en produkt i lagringen. Först behöver vi en funktion createProduct för att skapa en produkt, låt oss lägga till den i forStorage.js efter funktionen getProducts:

export async function createProduct() {}

Först lägger vi till someNetwork igen:

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

Sedan behöver vi ett unikt id för varje produkt, du har redan stött på detta i React-handboken. Låt oss använda biblioteket nanoid för detta. Skriv följande kommando i terminalen:

npm install --save nanoid

Importera biblioteket till forStorage.js:

import { nanoid } from 'nanoid'

Låt oss ha id på 6 tecken:

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

Initialt när vi skapar produkten kommer vi bara ha id i objektet. Låt oss anropa getProducts, lägga till den genererade produkten och uppdatera vår produktlista i lagringen. Klart:

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

Funktionen för att uppdatera listan i lagringen kommer att vara följande (vi kommer att lägga in produkterna under nyckeln products), låt oss placera den efter funktionen createProduct:

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

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material och skriv i forStorage.js funktionerna createStudent och setStudents för att lägga till studentdata i lagringen.