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