Տվյալների ավելացում պահեստում React Router-ում

Այս դասում մենք կզբաղվենք ապրանքի ավելացմամբ պահեստում: Սկզբից մեզ անհրաժեշտ է createProduct ֆունկցիան ապրանքը ստեղծելու համար, ավելացնենք այն forStorage.js ֆայլում՝ getProducts ֆունկցիայից հետո:

export async function createProduct() {}

Նախ կրկին ավելացնում ենք someNetwork:

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

Դրանից հետո մեզ կպահանջվի ունիկալ id յուրաքանչյուր ապրանքի համար, դուք արդեն հանդիպել եք դրան React-ի ձեռնարկում: Դրա համար կօգտվենք nanoid գրադարանից: Մուտքագրենք տերմինալում հետևյալ հրամանը:

npm install --save nanoid

Իմպորտավորենք forStorage.js ֆայլում գրադարանը:

import { nanoid } from 'nanoid'

Եկեք ունենանք id 6 նիշ երկարությամբ:

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

Սկզբնապես ապրանքը ստեղծելիս մենք օբյեկտում կունենանք միայն id: Կկանչենք getProducts ֆունկցիան, կավելացնենք ստեղծված ապրանքը և կթարմացնենք մեր ապրանքների ցուցակը պահեստում: Պատրաստ է:

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

Ցուցակը պահեստում թարմացնելու ֆունկցիան կլինի հետևյալը (մենք այնտեղ կտեղադրենք ապրանքները products բանալիով), տեղադրենք այն createProduct ֆունկցիայից հետո:

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

Վերցրեք ձեր կողմից նախորդ դասերին առաջադրանքներում ստեղծված հավելվածը: Օգտագործելով դասի նյութերը, գրեք forStorage.js ֆայլում createStudent և setStudents ֆունկցիաները՝ ուսանողների տվյալները պահեստում ավելացնելու համար: