Kuongeza Data kwa Hifadhi kwenye React Router

Katika somo hili tutashughulikia kuongeza bidhaa kwenye hifadhi. Kwanza tunahitaji kitendo createProduct kwa kuunda bidhaa, tuongeze kwenye forStorage.js baada ya kitendo getProducts:

export async function createProduct() {}

Kwanza tena ongeza someNetwork:

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

Lakini hapo baadaye tutahitaji kitambulisho cha kipekee kwa kila bidhaa, tayari umekutana na hili kwenye mafunzo ya React. Tutumie kwa hili maktaba nanoid. Weka kwenye terminal amri ifuatayo:

npm install --save nanoid

Lete kwenye forStorage.js maktaba:

import { nanoid } from 'nanoid'

Wacha tuwe na id kwa 6 herufi:

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

Awali wakati wa kuunda bidhaa kwetu watakuwa kwenye kitu tu id. Itaje getProducts, ongeza bidhaa iliyotengenezwa na sasisha orodha ya bidhaa zetu kwenye hifadhi. Imekwisha:

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

Kitendo cha kusasisha orodha kwenye hifadhi kitakuwa kifuatacho (tutaweka ndani yake bidhaa chini ya ufunguo products), tuweke baada ya kitendo createProduct:

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

Chukua programu, iliyoundwa na wewe katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, andika kwenye forStorage.js kitendo createStudent na setStudents kwa kuongeza data ya wanafunzi kwenye hifadhi.