Přidávání dat do úložiště v React Router

V této lekci se budeme zabývat přidáváním produktu do úložiště. Pro začátek potřebujeme funkci createProduct pro vytvoření produktu, přidejme ji do forStorage.js za funkci getProducts:

export async function createProduct() {}

Nejprve znovu přidáme someNetwork:

export async function createProduct() {
	await someNetwork();
}

A dále budeme potřebovat unikátní id pro každý produkt, již jste se s tím setkali v učebnici Reactu. Použijeme k tomu knihovnu nanoid. Zadejme v terminálu následující příkaz:

npm install --save nanoid

Importujme do forStorage.js knihovnu:

import { nanoid } from 'nanoid'

Nechť máme id po 6 znacích:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

Původně při vytváření produktu budeme mít v objektu pouze id. Zavoláme getProducts, přidáme vygenerovaný produkt a aktualizujeme seznam našich produktů v úložišti. Hotovo:

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;
}

Funkce pro aktualizaci seznamu v úložišti bude následující (budeme do něj ukládat produkty pod klíčem products), umístíme ji za funkci createProduct:

function setProducts(products) {
	return localforage.setItem('products', products);
}

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. S využitím materiálů lekce napište v forStorage.js funkci createStudent a setStudents pro přidávání dat studentů do úložiště.