React Router හි ගබඩාවෙන් දත්ත ලබා ගැනීම

ඔබට පෙනෙන පරිදි, මේ වන විට අපගේ යෙදුම ස්ථිතික එකක්. මෙම සහ ඊළඟ පාඩම්වලදී අපි එය සජීවී කිරීම ආරම්භ කරමු. ඉදිරි පාඩම් කිහිපය තුළදීම අපට React Router භාවිතයෙන් නිෂ්පාදන ලැයිස්තුවට එකතු කිරීමට හැකි වේ.

මෙම පාඩමෙන් අපි, ආරම්භයට, ගබඩාවෙන් දත්ත ලබා ගැනීම සමඟ කටයුතු කරමු. දත්ත ස්ථානීයව ගබඩා කිරීම සඳහා අපි localForage ගබඩාව භාවිතා කරමු (ඔබට එහි භාවිතය සහ වාසි ප්‍රලේඛනයෙන් කියවිය හැක) - LocalStorage හි සමානයක්, සියලු නවීන බ්‍රවුසර විසින් සහාය දක්වයි. ඇත්ත වශයෙන්ම මෙය ගබඩා තාක්ෂණ කිහිපයක එකතුවකි. සාපේක්ෂව පහසු භාවිතයක් සමඟ, එය විශාල පරිමාවක දත්ත ගබඩා කිරීමට ඉඩ දෙයි, විවිධ වර්ගවල, පින්තූර ද ඇතුළුව. අපි එය අපගේ ව්‍යාපෘතියට ස්ථාපනය කරමු. ටර්මිනලයේ ඇතුල් කරන්න:

npm i localforage

අපගේ යෙදුම නැවත අරඹමු. src ෆෝල්ඩරයේ අපි forStorage.js ගොනුව සාදමු, ගබඩාව සමඟ වැඩ කිරීම සඳහා කාර්යයන් අඩංගු වනු ඇත.

ඉතින්, ගබඩාවෙන් නිෂ්පාදන පූරණය කිරීමේ කාර්යයෙන් ආරම්භ කරමු. forStorage.js වෙත පුස්තකාලය ආයාත කර getProducts කාර්යය ලියමු නිෂ්පාදන ලබා ගැනීම සඳහා:

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

කේත කාර්යයට පසුව පහත දී අපි someNetwork සඳහා කේතය ද එකතු කරමු, ජාල ප්‍රමාදයන් (තත්පර 0.7 දක්වා) අනුකරණය කරමින් කාර්යයන් සාමාන්‍ය ක්‍රියාකාරීත්වය සඳහා. අපගේ නිෂ්පාදනය "කෑෂ් කර ඇත්නම්", ගබඩාව සමඟ වැඩ කිරීමේ කාර්යයන් වල ප්‍රමාදයක් නොමැත, නැත්නම්, ප්‍රමාදයක් ඇත, ඔබට පසුව දකිනු ඇත, එය ක්‍රියා කරන ආකාරය:

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

කලින් පාඩම් සඳහා වන කාර්යයන් වලදී ඔබ සාදන ලද යෙදුම ගන්න. localForage ගබඩාව යෙදුමේ ස්ථාපනය කරන්න.

පාඩම් ද්‍රව්‍ය භාවිතා කරමින්, forStorage.js ගොනුව සාදන්න සහ එහි getStudents කාර්යය ලියන්න ගබඩාවෙන් සිසුන්ගේ දත්ත ලබා ගැනීම සඳහා.