#26: 🍕 React Pizza v2 - Сохраняем пиццы в LocalStorage, грамотно структурируем папки проекта

[@warcraft.mp4889]

На это я потратил месяц своей жизни. Надеюсь это все будет не зря) Спасибо за курс, это было познавательно, а главное ненапряжно. И главное - все обьяснялось.

[@katenka_katrusya]

делала сохранение в LS в середине курса. Всю логику сделала в редаксе в слайсе корзины. Поняла теперь, что так делать нельзя, а я думала какая ж я молодец. P.S. Переделала всё на Persist, а это оказалось куда круче, чем голый localStorage 😀

[@IvanCrazyArchangelsk]

Очень крутые уроки! Только я, как новичок, стараюсь черпать не детали реализации, а концептуальный список фич и проблем в реальном продакшене. Мои собственные изыскания по теме урока (намёки и подсказки): 1. Сохранение корзины: решил вопрос без persist. Обратите внимание на опцию preloadedState и метод стейта subscribe. Между ними можно вложить собственный миддлвер на 10-15 строк кода вместо подгрузки целой библиотеки. 2. По структуре проекта: в директории src создал директорию types, в которой разбивка по сущностям проекта. Преимущества: IDE отдельно окрашивает и подписывает иконку директории, все созданные сущности типов и интерфейсов внутри этой директории не нуждаются в экспорте/импорте. 3. Хоть интерфейсы более гибкая штука, но лучше, по возможности, создавать типы. Так IDE будет подсвечивать структуру аннотации типов при наведении на неё в коде, не нужно будет постоянно обращаться в исходное описание. А интерфес IDE просто подсвечивает, как интерфейс.

[@Ari0tee]

Еще кое-что нашел. Если мы удаляем из cart "item", через removeItem, то в totalPrice у нас остается ранее добавленное число (стоимость). А также в totalPrice не меняется значение. Добавьте это в редуюсер removeItem //после удаления элемента из массива items, значение totalPrice будет пересчитываться на основе обновленного массива items state.totalPrice = calcTotalPrice(state.items);

[@АнтонБуйнов-м3й]

Курс успешно пройден. Автору респект. Пошел фиксить навигацию по URL и исправлять косяки с адаптивом

[@Калабарака]

Можно накатить Persist в Store, чтобы обойти этот урок. import { configureStore } from '@reduxjs/toolkit'; import filter from './slices/filterSlice'; import cart from './slices/cartSlice'; import pizza from './slices/pizzaSlice'; import { useDispatch } from 'react-redux'; import storage from 'redux-persist/lib/storage'; import { persistReducer, persistStore } from 'redux-persist'; import thunk from 'redux-thunk'; const persistConfigPizza = { key: 'pizza', storage, }; const persistConfigCart = { key: 'cart', storage, }; const persistConfigFilter = { key: 'filter', storage, }; const persistedReducerPizza = persistReducer(persistConfigPizza, pizza); const persistedReducerCart = persistReducer(persistConfigCart, cart); const persistedReducerFilter = persistReducer(persistConfigFilter, filter); export const store = configureStore({ reducer: { persistedReducerPizza, persistedReducerCart, persistedReducerFilter }, devTools: process.env.NODE_ENV !== 'production', middleware: [thunk], }); export const persistor = persistStore(store); export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; export const useAppDispatch: () => AppDispatch = useDispatch; и в index или APP ,

[@matvienko_p]

ооо🔥 чит-коды в комментариях 😁

[@dvornicked]

Необоснованный буллинг Алисы, но мне нравится! Лайк

[@ПавелСтародубцев-ц6ш]

Очень хорошо что Денис объясняет ,как делают в реальной разработке и приводит примеры

[@ВикторБелянкин-м1щ]

Денис, отдельное спасибо за этот видос! Очень круто объяснил локал сторадж и очень здорово, что показал, как "интересснее разбить слейсы"

[@shokhrookhr3850]

Спасибо. Обрадовал перед сном)

[@dimalavrenov3916]

Внатуре. Вроде рабочий варик, завтра попробую

[@nikitareshetnikov4220]

21:30 - RIP Алиса😆😆

[@Brunopt893]

32:45 - Все просто, какой проект такая и структура))))

[@dominic9040]

решил сделать сохранение корзины еще пару уроков назад, долго пытался сам, потом загуглил и сделал через persist, как-то даже прикольно, что сам решил задачу, не смотря этот урок

[@elconrel9665]

Можешь кинуть код как ты сохранил ? Мучаюсь с персистом, не могу исправить гору ошибок... Заранее спасибо

[@rustamakhmetyanov4404]

React / сохранение в LocalStorage /спасибо за курс

[@АртёмПронин-я3и]

Я стажировку проходил в одной компании и там рекомендовали называть интерфейсы, начиная с буквы "I". По типу ICartItem. И чтобы не было такой проблемы как на видео, что интерфейс и компонент называются полностью одинаково и он пару раз ошибся и импортировал не из того файла

[@ГеннадийГорохов-ц8н]

Шикарное видео про локал сторадж.

[@JavaScriptcher]

Пока делаю 15 урок, решил в будущее заглянуть

[@ArchakovBlog]

если пройдёшь 15 урок, то ты избранный

[@shokhrookhr3850]

@@ArchakovBlog Спасибо за мотивацию 💪🏻

[@ДенисСофієнко]

@@ArchakovBlog Избранный сеньор помидор 😂

[@yersainaldabayev8836]

Не понимаю какой смысл в isMounted в useEffect, после того как мы get c localStorage за хардкодили прям в слайс в инишиал стейт? по сути происходит автоматически проверка прямо в слайсе

[@diggerdog001]

Есть баг, кстати, что если удалишь из корзины товары, то из LocaleStorage он же не удаляется, по итогу корзина снова отображает товары

[@hotmitrofan]

у меня нет такого бага

[@Alex-dq9yk]

Спасибо за курс) Такой вопрос: есть ли смысл учить Redux? Который не тулкит)

[@ArchakovBlog]

Есть. Но многие переходят на тулкит

[@jamjam3337]

🔥🔥🔥

[@vaich1738]

Отличный курс

[@nickdunne1235]

Красавчик, спасибо.

[@UnKnown-ur9fq]

да блин, redux-persist крутая штука и создается секунд за 10.. главное первый раз сделать, а дальше все однотипно к любым проектам

[@kenanhaciyev3759]

klass

[@sergeikanashevsky8311]

Что то пошло не так или скоро NEXT ? )

[@СтройКонсалт]

День 15-й. Начал #26 в 17:00. Полторы тонны лайков - авансом. UPD: закончил в 23:00. Дэн - ЧЕЛОВЕЧИЩЕ!!

[@BlockElement]

Ну ты крутой. Прям до конца дошел

[@Denis-ws1vn]

Почему const isMounted = React.useRef(false) , а не isMounted = React.useState(false)?

[@ГригорийБотаров]

при изменении useState будет происходить перерендер компонента, который нам будет мешать

[@miksa8875]

@@ГригорийБотаров думаю дело не в этом, а в том, что у рефа можно всегда достать актуальное значение

[@ГригорийБотаров]

@@miksa8875 как и у useState. Там тоже можно всегда достать актуальное значение. useState позволяет перерендеривать компонент при изменении стейта. Если бы в React изначально была реактивность, как во Vue, или мы использовали RxJS или MobX, которые добавляют реактивность, то разницы бы между их работой не было, точнее между результатом их работы

[@miksa8875]

@@ГригорийБотаров да. Я спутал. В useCallBack нельзя получить актуальный стейте, если не передать в зависимости или в реф

[@ГригорийБотаров]

@@miksa8875 актуальное значение useState получить не удастся, если изменять его напрямую, а не через set(имя переменной). Но при использовании ее, у нас будет ререндериться компонент, что изменяет текущие данные и выводит актуальные. Если бы до актуальных данных useState можно было достучаться через useEffect, то тогда мы бы не смогли бы выводить актуальные данные в JSX самого компонента, через useState

[@zloba7578]

Скажите, пожалуйста, а какой шрифт используете?

[@REDH3ADd]

скорее всего Mono Lisa, посмотрите Mono шрифты

[@engineerng]

Nunito

[@СтепанРазин-к2н]

Это был последний урок в серии? Или будут еще?

[@ArchakovBlog]

Будут ещё

[@aswonder5569]

А почему нельзя вынести _всю_ логику с localStorage в cartSlice? Например, создать функцию обновления localStorage - типа saveCart() - и вызывать её в конце методов addItem(), removeItem() и clearItems(). Тогда, по идее, мы отделяем бизнес-логику от UI. Я попробовал - работает так же. Правда, приходится дублировать её вызов во всех редюсерах слайса.

[@ArchakovBlog]

Это side effect, что есть не хорошо делать в редаксе

[@aswonder5569]

@@ArchakovBlog Я не согласен. Не вижу никакого side effect. localStorage.getItem() аналогичен axios.get(), только с другого ресурса.

[@solodzh]

@@ArchakovBlog А localStorage.getItem - это не side effect? Или при инициализации можно? Но тогда и парсинг фильтров при первой загрузке проще сделать в redux при инициализации слайса.

[@StrikerFeed]

​@@aswonder5569 изучите понятие сайд эффекта. При получении в функцию одних и тех же данных, метод, например, localStorage.getItem(), может возвращать разные значения. Это АПИ браузера, там в любой момент может быть что угодно, именно поэтому это сайд эффект. И если Вы скажите, что нет, вы можете контроллировать что там находится, есть же localStorage.setItem() - ну нет, это тоже сайд эффект. Сайд эффектам не место в редаксе.

[@markwahlberg9358]

+