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