Синхронизация Redux и localStorage с redux-persist
ฝัง
- เผยแพร่เมื่อ 21 ธ.ค. 2021
- Кэширование данных приложения на стороне клиента (в браузере) - одна из центральных тем frontend-разработки. Работая с Redux, мы можем сами написать кастомную логику middleware, либо использовать готовую библиотеку redux-persist, которая сделает это за нас.
Код из видео: github.com/michey85/redux-too...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
![[페이스캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FaceCam) @SBS Inkigayo 240707](http://i.ytimg.com/vi/x9VRNTV4VDI/mqdefault.jpg)
Пусть хранят тебя все силы, добрый человек. Без вас я себе весь мозг вывихнул. Огромное вам спасибо!
+1, уже 3 час разбираюсь как сохранять корзину товаров в локале и взаимодействовать с удалением через toolkit
Присоединяйтесь!!!!!! Можно сказать спасает некоторых людей от суицида!!!
Как вы приятно все объясняете! "Provider обнимает наше приложение" - растекся в улыбке, как будто меня вместе с приложением обняли))
Самые адекватные уроки по redux без воды, спасибо
Я смог вникнуть в основы реакт и редакс только благодаря вашим урокам. Спасибо вам большое, Михаил!
Смог настроить whitelist?
Отличный туториал. Спасибо за Ваш труд!
Большое спасибо, Михаил. Не могу остановиться смотреть Ваши видео. Все очень доходчиво и понятно.
Михаил, и снова спасибо) У вас как обычно, потрясающая подача информации. Благодарю за ваши труды👍
Спасибо за такие полезные видео! обязательно ждем новых!
Супер! Быстро и по делу🤩
Миллион лайков вам! Голову сломал по этой теме, ваше видео помогло разобраться:) спасибо вам Михаил!
Михаил, спасибо Вам огромное. До Вашего видео мне приходилось всю логику с localStorage писать в санках (redux-thunk), а тут вот как все просто
Благодарю! Добра тебе добрый человек)
коротко и гениально, спасибо!!
которій раз убеждаюсь в твоем таланте лекторства)
Спасибо вам большое за ваши видео) Уже не первый раз выручаете
Спасибо большое , доходчивое объяснения для начинающих)))
Михаил, просто живите вечно!!!)) Спасибо вам за всегда полезную информацию!
Супер. Дякую! Просто! Швидко! Зрозуміло!
Объяснений понятнее ваших я еще не видел, спасибо!
Благодарю за видео! Полезная штука.
Огромное спасибо за видео! Оказался очень полезным)
Спасибо, очень полезное видео!
Миша, спасибо. Твоё видео помогло мне сделать фичу для тестового, закешировать результаты запроса, очень классно объясняешь! Redux-persist незаменимая штука, теперь не нужно выносить себе мозг с localstorage, потом парсить этот JSON, лукас, подписка и вот это вот всё:)
Когда я что то не помню всегда вспоминаю тебя :)
Спасибо! Вы оставляете отличное информационное наследие для последующих поколений разработчиков из СНГ.
В мире разработки всё быстро меняется :) может быть основы вёрстки и js меняются несильно в последнее время, остальное в течение двух-трех лет может измениться до неузнаваемости :)
@@mishanep в любом случае 2-3 года хватит чтобы помочь тысячам людей
Спасибо за объяснения, помогло!
Михаил! Спасибо за ваш труд.
Я как раз сейчас в поиске своей первой работы и пытаюсь оптимизировать решение Домашних Заданий, что дают на собеседовании. И всё больше сталкиваюсь что Редакс Персист или Редакс Тулкит упрощают жизнь, а на Вашем канале как раз есть все нужные ролики, не затянутые по времени и достаточно подробно разобраны.
Т.к. в моей стране Джунов не ищут, а все уже должны быть синьорами, приходиться рисовать "виртуальный" опыт. А это несет под собой некоторые сложности в рассказе, а вот после Ваших роликов, рассказывать "как я делал" тот или иной проект, становиться проще)
Ещё раз спасибо огромное за Труд!!!!!
отлично объяснение, спасибо большое
Очень крутая подача материала, все супер легко и понятно после просмотра! Спасибо огромное!
Делала по Вашему видео туду с Redux Toolkit и по завершению задалась вопросом, как припилять local storage, чтобы после обновления страницы задачи не пропадали. И тут нахожу это видео как ответ на свой вопрос) спасибо за такой глобальный подход!
Оо, крутяк. Очень крутой разбор полезного модуля
спасибо. сегодня узнал что у вас есть курсы, хотя смотрел уже 10 роликов. чутка побольше рекламы своих курсов добавляйте в видео!
Спасибо, видео очень помогло😊
спасибо за хороший ролик! очень понятно и доходчиво!!
Михаил, спасибо!
Спасибо за информацию!
Будет круто увидить видео об использование с TypeScript
Очень помог гайд, использовал для синхронизации товаров в корзине с localstorage, т.к. использую Next.js были проблемы и ошибки, но библиотека помогла, спасибо!
Спасибо вам, Михаил ))
спасибо, очень помогли, делал логинку для сайта и принцип очень похожий
Миша какое же ты добро делаешь, ты да же не представляешь!!!!
Спасибо вам большое)
спасибо, очень помогло это видео
спасибо, просто спасибо, я уже замучался индусов смотреть на ютубе, пишу приложение на React Native с Redux Toolkit, встала задача сохранять стейт, дошел до Redux Persist, в документации не так сильно разжевано, как у тебя, спасибо еще раз
Тут в видео не разжевано про сохранение стейта в глубину, если у вас есть потребность сохранять Стейт на 3 или больше уровня, то вы можете использовать библу redux-deep-persist
Это просто надстройка над конфигом обычного redux-persist, очень поможет
Крутая штука, спасибо!
Ты знаешь, я только на англ читаю и учусь, но случайно наткнулся и оч понравилось как преподносишь материал. Приобрел твой курс на Юдеми, спасибо!
Эх... Если бы моя благодарность знала границы, но она их не знает! :) Спасибо за видео, а то иногда почитаю документацию и ещё некоторые вопросы остаються, потом сижу ломаю голову, что да как, а так посмотрел видео и всё становиться понятно. Благодарю!
Спасибо большое
Однозначно респектую из сердечка. Видно, что ты любишь свое дело чувак.
Живи вечно! Здоровья и благополучия тебе, добрый человек!!!
Спасибо =)
Низкий поклон тебе! И от души спасибо! Ну как нельза вовремя на это видео попал! Избавил он махинаций с localStorage вручнуе..
Забавно, увидев этот ролик в рекомендациях и прочитав его название я задал себе вопрос "а я вообще знаю, как прикрутить редакс к local storage?" Ответив отрицательно тут же решился на просмотр. Не пожалел ни разу, теперь добавил библу себе в закладки, спасибо!
красавчик! как всегда лучший! все максимально просто, понятно, без лишних слов на 3 часа
шикарно!
Спасбо, очень usefull :)
spasibo brat
Когда-то писал свой велосипед по этой теме через extraReducers. Тоже работало на ура. Но на днях решил провести рефакторинг старого проекта, и ресерчил тему синка с ls. Нашел утром персист) почитал доку и вот... TH-cam уже предлагает глянуть видос по теме... Прикольно! Утром прикручу)))
спасибо друг)))
Как же вовремя в рекомендации выпало это видео, я как раз ломал голову, как бы мне залить свой стор в Локал сторэдж)
Ну думаю расслаблю мозг, залипну на 15 минут в ютьюбчик, а тут бац! 👌🏻😁
Спасибо огромное за информацию 👍🏻
Миша - красавчик, как обычно :)
Я то как-то в петпроекте персистил стор без либы, по гайду Дэна Абрамова :)
Браво
круто!
Было бы здорово увидеть еще в связке с TypeScript --- Redux-Persist
Мішка, дякую
Доделал до конца
дякую
Спасибо Михаил, попробуйте сделать на реакте Google keep, думаю будет интересно)
Nice my friend
Спасибо! Вот единственно чем редакс напрягает, это бесконечное количество дополнительных манипуляций, чтоб подключить что то допом. Можно было в сам тулкит встроить этот персист, и по флагу true его включать...Но нет, надо тащить еще кучу всего))) За ролик отдельная благодарность)
Такая философия реакта... Нихрена не давать из коробки
@@ruslanaliyev3765 да реакт то понятно...вопрос к тулкиту...почему санки засунули к себе, а работу с локальным хранилищм нет)
Может ещё добавят :) thunk тоже не сразу появился)
Я говорю, пока они раздупляться с этим реактом, чтобы он работал нормально без миллиона непонятных библиотек, уже выпустят какой-то другой фреймворк, или весь вэб перейдет куда-то.
Клепать одно, потом делать другое, но всё равно не доработав до ума - это прям про реакт.
совсем просто, оказывается. А то я мучался с кастомными решениями
2:50 - Михаил, redux произносится как "рИдакс", если говорить конкретно про программирование, либо "ридАкс", если в значении "сокращение", но британское произношение даже в контексте программирования звучит как "ридАкс", но всегда не "рЕдакс"
вот несколько примеров произношения:
1. th-cam.com/video/T0elp5K9lLg/w-d-xo.html
2. th-cam.com/video/iXskCHA8QCk/w-d-xo.htmlsi=YbCXtGsZz5aHB94g&t=5650
3. th-cam.com/video/7fdQJ5ry_NI/w-d-xo.htmlsi=6GGb44XbKT_clcWl&t=1640
4. th-cam.com/video/5XntRkFWpuw/w-d-xo.htmlsi=nEdDE9oEIGSrn20o&t=307
5. th-cam.com/video/dfsyABvzpj0/w-d-xo.htmlsi=9WMEvnHRyLTH82mC&t=102
6. th-cam.com/video/4X4tCIJeo8w/w-d-xo.htmlsi=tNzxFi7H_FespOJt&t=754
Спасибо за видео Михаил! Скажите пожалуйста, планируется ли подобное видео по Redux-Saga?
Пока не планирую. По redux saga есть несколько русскоязычных циклов на других каналах, они актуальные.
Круто! А как это штука будет со Svelte работать?
@mishanep Хорошее видео! Большое Вам спасибо за ваш труд и потраченное время. Возник небольшой вопрос, возможно есть идея записать такое видео. Как бы Вы настраивали redux на случай когда пользователь залогинен и данные нужно синхронизировать и сохранять в базу и наоборот когда пользователь только зарегистрировался и данные нужно перенести в базу?
решил вопрос? как?
Михаил было ли у вас что redux-persist не сохранял в localstorage? Я использую RTK query, на stack overflow уже смотрел и ничего не помогло, просто пустой массив как на 10:35 в видео, и туда не хочет добавляется ничего
RTK query по своей сути задуман несколько для другого. Стейт-менеджером в данном случае является сервер, а инструменты вроде данного или его аналогов (SWR, react-query) постоянно получают обновления. В том числе распространен паттерн, когда данные инструменты запрашивают обновления, если какое-то время окно с сайтом было неактивно. Я не пробовал хранить данные с rtk query через persist, но, повторюсь, выглядит так, что задумано по-другому.
Мне особенно сложно даются эти "моменты", вроде того как toolkit дружить с другими библиотеками redux, как его настроить для работы с observable я так и не понял(
kruto
у меня *getDefaultMiddleware is not a function* почему?
Hi Mixail. i want to ask a question. how can i write multiple persist? you have one persistconfig and one key but if we want multiple persist?
We can create nested persist. With Redux we always have only one store, it means that on a top level we don't need more than one persist. But, of course, we can nested them if needed.
@@mishanep thats means redux always deploys datas in LocalStorage with 1 key. I get it. Just think we have 2 Slicer, one of them is counter which increase value, second is another process exp save data which we get from fetch. If have 2 slicer i need 2 key, deploy another names in locale
@@alxanbayramov9128 Take a look at this part of the docs github.com/rt2zz/redux-persist#nested-persists Any nested persist has its own config with additional key.
@@mishanep thanks a lot
Можно ли как-то отловить событие закрытия вкладки и очистить localstorage?
Можно. Но если вам надо очищать данные при закрытии - просто используйте SessionStorage.
почему то не работает с новым nextjs при обновлении страницы все равно стейты слетают
редУкс, редАкс, госсподи, блин, ааааааааа
@mishanep Михаил, а ведь это нормально не знать наизусть как все это пишется, если разбудить в 3 ночи, а просто представлять, что тот или иной функционал существует в принципе и в случае необходимости просто идти вспоминать его, ну или гуглить/стаковерфлоу/спрашивать в группах ? Объем информации же огромен, как это все можно помнить, особенно, если не каждый день это пишешь
Конечно. Многие вещи мы делаем один-два раза при создании проекта. И чаще всего по документации.
да, такой же вопрос возникает
у меня ошибка из за TS когда передаю persistor в PersistGate. а как это исправить? памагитеее
В документации redux toolkit есть страница, описывающая как быть с типами при использовании persist.
Ден Абрамов на своих стримах говорит "Редáкс"
redux-persist failed to create sync storage. falling back to noop storage.
Меня данная ошибка беспокоит, тут нашел решение через noopStorage, но не знаю, насколько это корректное решение. Был бы рад, если отпишитесь по этому поводу
Не сталкивался с такой проблематикой.
Либа уже три года не обновлялась. Насколько это критично?
Просто и доступно. спасибо бро )