Додавање података у складиште у 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 за додавање података о студентима у складиште.