Деректер қоймасына деректерді қосу 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 функцияларын жазыңыз.