Duomenų pridėjimas į saugyklą React Router

Šioje pamokoje mes užsiimsime produkto pridėjimu į saugyklą. Pirmiausia mums reikia funkcijos createProduct produktui sukurti, pridėkime ją į forStorage.js po funkcijos getProducts:

export async function createProduct() {}

Pirmiausia vėl pridedame someNetwork:

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

O toliau mums reikės unikalių id kiekvienam produktui, jūs jau susidūrėte su tuo React vadovėlyje. Naudokimės tam biblioteka nanoid. Įveskime terminale šią komandą:

npm install --save nanoid

Importuokime į forStorage.js biblioteką:

import { nanoid } from 'nanoid'

Tegul mes turime id po 6 simbolius:

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

Iš pradžių, kurdami produktą, mes turėsime objekte tik id. Iškvieskime getProducts, pridėkime sugeneruotą produktą ir atnaujinkime mūsų produktų sąrašą saugykloje. Paruošta:

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

Funkcija sąrašui atnaujinti saugykloje bus tokia (mes į ją įrašysime produktus pagal raktažodį products), patalpinkime ją po funkcijos createProduct:

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

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, parašykite forStorage.js funkcijas createStudent ir setStudents studentų duomenims pridėti į saugyklą.