React Router-yň ammaryna maglumat goşmak

Bu sapakda biz ammara önüm goşmak bilen meşgullanarys. Başlangyç üçin bize createProduct funksiýasy gerek bolup, ony forStorage.js faýlynda getProducts funksiýasyndan soň goşarys:

export async function createProduct() {}

Ilki bilen ýene bir gezek someNetwork goşýarys:

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

Indi bolsa, her önüm üçin takyklyk ID gerek, ony React okuw kitabynda ýatdan çykaran bolmaly. Bu üçin nanoid kitaphanasyny ulanarys. Terminala aşakdaky buýrugy ýazyň:

npm install --save nanoid

forStorage.js faýlyna kitaphanany import edeliň:

import { nanoid } from 'nanoid'

id-lerimiz 6 nyşandan ybarat bolsun:

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

Önüm döredilende, obýektdemizde diňe id bolar. getProducts-i çagyryp, döredilen önümi goşup we ammarymyzdaky önümleriň sanawyny täzeläliň. Taýýar:

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

Ammaryň sanawyny täzelemek üçin funksiýa aşakdaky ýaly bolar (ony ammar içine products açary astynda ýerleşdireris), ony createProduct funksiýasyndan soň ýerleşdireris:

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

Öňki sapaklardaky tabşyryklarda döreden aplikasiýaňyzy alyň. Sapak materyallaryndan peýdalanyp, forStorage.js faýlynda ammara talyplaryň maglumatlaryny goşmak üçin createStudent we setStudents funksiýalaryny ýazyň.