React Router හි ගබඩාවට දත්ත එකතු කිරීම

මෙම පාඩමේදී අපි ගබඩාවට නිෂ්පාදනයක් එකතු කිරීම සමඟ කටයුතු කරමු. මුලින්ම අපට අවශ්‍ය වන්නේ නිෂ්පාදනයක් සෑදීම සඳහා createProduct ශ්‍රිතයයි, එය forStorage.js හි getProducts ශ්‍රිතයට පසුව එකතු කරමු:

export async function createProduct() {}

මුලින්ම නැවතත් someNetwork එකතු කරමු:

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

ඊළඟට අපට අවශ්‍ය වනු ඇත්තේ අනන්‍ය අංකයක් සෑම නිෂ්පාදනයක් සඳහාම, ඔබ දැනටමත් මෙය 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 ශ්‍රිත ලියන්න ගබඩාවට ශිෂ්‍ය දත්ත එකතු කිරීම සඳහා.