Upakiaji wa Data ya Ukurasa kutoka kwa Vigezo vya URL kutoka Kuhifadhi kwenye React Router

Sasa tunaweza kuongeza bidhaa kwenye programu yetu. Anzisha programu, ongeza kwa kifungo bidhaa kadhaa. Ikiwa sasa tutabonyeza bidhaa zenyewe kwenye orodha, tutaona kwamba kila bidhaa bado ina ukurasa sawa wa kimetabolite, ambao tutafanya kazifanyi katika somo hili na masomo yajayo.

Pia ni muhimu kuzingatia jambo lingine. Kwa ujumla, URL nzime imegawanyika katika sehemu - hizi ni sehemu za URL kati ya herufi /. Labda unakumbuka kuwa wakati wa kuunda hii programu tulibainisha njia 'products/:productId', basi :productId inaitwa hapa sehemu ya nguvu. Mbele yake huwekwa alama ':'. Thamani katika sehemu hii zitabadilika, hasa hizi huanguka kwenye vigezo vya URL (URL Params au params), ambazo hupitishwa kwa mpakaji chini ya ufunguo fulani, kwa upande wetu hii itakuwa params.productId.

Angalia mstari wa anwani kwenye kivinjari, unapobonyeza bidhaa kwenye orodha. Utaona, kwamba sehemu ya mwisho kwenye mstari wa anwani inabadilika, hasa hizi thamani ndizo zitaanguka kwa mpakaji. Na bidhaa zetu kwenye kuhifadhi zina id ya kipekee iliyotengenezwa na sisi, hivyo tutapakuliwa bidhaa ile ambayo tunahitaji.

Na sasa baada ya mapumziko kidogo hebu tufanye kazi hatimaye na ukurasa wa bidhaa, hasa - na upakiaji wa data kutoka kuhifadhi.

Turudie mchakato unaofahamika. Kwa mara ya kwanza katika forStorage.js tuongeze kitendo getProduct kwa kupata data ya bidhaa maalum kutoka kuhifadhi kwa id. Hapa tayari tutapita kwenye kitendo id na, ipasavyo, ikiwa bidhaa yetu "imehifadhiwa", basi itajitokeza bila kuchelewa:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

Ifuatayo tunahitaji kupata safu ya bidhaa na kati yao kupata bidhaa yetu kwa id iliyopitishwa:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

Chukua programu, iliyotengenezwa na wewe katika kazifanyi kwa masomo yaliyopita. Kwa kutumia nyenzo za somo, tengeneza katika forStorage.js kitendo getStudent kwa kupata data ya mwanafunzi kwa id.