Data byvoeging tot die stoor in React Router

In hierdie les sal ons die byvoeging van 'n produk tot die stoor hanteer. Om te begin het ons 'n funksie createProduct nodig vir die skepping van 'n produk, laat ons dit byvoeg in forStorage.js na die funksie getProducts:

export async function createProduct() {}

Voeg eers weer someNetwork by:

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

Maar dan sal ons 'n unieke id vir elke produk nodig hê, jy het dit reeds teengekom in die React-handleiding. Laat ons die nanoid-biblioteek hiervoor gebruik. Tik die volgende opdrag in die terminal:

npm install --save nanoid

Voer die biblioteek in forStorage.js in:

import { nanoid } from 'nanoid'

Laat ons id van 6 karakters hê:

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

Aanvanklik, wanneer 'n produk geskep word, sal ons slegs id in die objek hê. Roep getProducts op, voeg die gegenereerde produk by en werk ons lys produkte in die stoor op. Klaar:

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

Die funksie om die lys in die stoor op te dateer sal die volgende wees (ons sal produkte daarin plaas onder die sleutel products), plaas dit na die funksie createProduct:

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

Neem die aansoek wat jy in die opdragte van vorige lesse geskep het. Gebruik die lesmateriaal, skryf in forStorage.js die funksies createStudent en setStudents om studentedata by die stoor te voeg.