Дадаванне даных у сховішча ў 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 для дадавання даных студэнтаў у сховішча.