მონაცემების საცავში დამატება 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 სტუდენტების მონაცემების საცავში დასამატებლად.