Добавяне на данни в хранилището в 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 за добавяне на данни за студенти в хранилището.