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

← →
↑