Datu pievienošana React Router krātuvē

Šajā nodarbībā mēs nodarbosimies ar produkta pievienošanu krātuvē. Vispirms mums vajag funkciju createProduct, lai izveidotu produktu, pievienosim to forStorage.js pēc funkcijas getProducts:

export async function createProduct() {}

Vispirms atkal pievienojam someNetwork:

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

Tālāk mums būs nepieciešams unikāls id katram produktam, jūs jau esat sastapušies ar to React mācību grāmatā. Izmantosim šim nolūkam bibliotēku nanoid. Ievadīsim terminālī šādu komandu:

npm install --save nanoid

Importējam forStorage.js bibliotēku:

import { nanoid } from 'nanoid'

Lai mums būtu id pa 6 simboliem:

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

Sākotnēji, izveidojot produktu, mums būs objektā tikai id. Izsauksim getProducts, pievienosim ģenerēto produktu un atjaunināsim mūsu produktu sarakstu krātuvē. Gatavs:

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 saraksta atjaunināšanai krātuvē būs šāda (mēs ievietosim tajā produktus ar atslēgu products), novietosim to pēc funkcijas createProduct:

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

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, uzrakstiet forStorage.js funkciju createStudent un setStudents studentu datu pievienošanai krātuvē.