Тёмный

Синхронизация Redux и localStorage с redux-persist 

Михаил Непомнящий
Подписаться 56 тыс.
Просмотров 36 тыс.
50% 1

Кэширование данных приложения на стороне клиента (в браузере) - одна из центральных тем frontend-разработки. Работая с Redux, мы можем сами написать кастомную логику middleware, либо использовать готовую библиотеку redux-persist, которая сделает это за нас.
Код из видео: github.com/michey85/redux-too...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Опубликовано:

 

21 дек 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 109   
@user-rl8qw2jf8r
@user-rl8qw2jf8r 2 года назад
Пусть хранят тебя все силы, добрый человек. Без вас я себе весь мозг вывихнул. Огромное вам спасибо!
@bur5153
@bur5153 2 года назад
+1, уже 3 час разбираюсь как сохранять корзину товаров в локале и взаимодействовать с удалением через toolkit
@andrewsam224
@andrewsam224 5 месяцев назад
Присоединяйтесь!!!!!! Можно сказать спасает некоторых людей от суицида!!!
@ilysov
@ilysov Год назад
Как вы приятно все объясняете! "Provider обнимает наше приложение" - растекся в улыбке, как будто меня вместе с приложением обняли))
@neodinok-it3ym
@neodinok-it3ym 3 месяца назад
Самые адекватные уроки по redux без воды, спасибо
@suspenseorigin5542
@suspenseorigin5542 Год назад
Я смог вникнуть в основы реакт и редакс только благодаря вашим урокам. Спасибо вам большое, Михаил!
@bake5448
@bake5448 Год назад
Смог настроить whitelist?
@black_light
@black_light 3 месяца назад
Отличный туториал. Спасибо за Ваш труд!
@user-qc1cn4dl8q
@user-qc1cn4dl8q 2 года назад
Большое спасибо, Михаил. Не могу остановиться смотреть Ваши видео. Все очень доходчиво и понятно.
@RonaMelone
@RonaMelone 2 года назад
Михаил, и снова спасибо) У вас как обычно, потрясающая подача информации. Благодарю за ваши труды👍
@nic3guy
@nic3guy 2 года назад
Михаил, спасибо Вам огромное. До Вашего видео мне приходилось всю логику с localStorage писать в санках (redux-thunk), а тут вот как все просто
@alexeylipov876
@alexeylipov876 2 года назад
Миллион лайков вам! Голову сломал по этой теме, ваше видео помогло разобраться:) спасибо вам Михаил!
@andreysamaev6966
@andreysamaev6966 Год назад
коротко и гениально, спасибо!! которій раз убеждаюсь в твоем таланте лекторства)
@abolnikov
@abolnikov 2 года назад
Михаил! Спасибо за ваш труд. Я как раз сейчас в поиске своей первой работы и пытаюсь оптимизировать решение Домашних Заданий, что дают на собеседовании. И всё больше сталкиваюсь что Редакс Персист или Редакс Тулкит упрощают жизнь, а на Вашем канале как раз есть все нужные ролики, не затянутые по времени и достаточно подробно разобраны. Т.к. в моей стране Джунов не ищут, а все уже должны быть синьорами, приходиться рисовать "виртуальный" опыт. А это несет под собой некоторые сложности в рассказе, а вот после Ваших роликов, рассказывать "как я делал" тот или иной проект, становиться проще) Ещё раз спасибо огромное за Труд!!!!!
@user-fj1ct1fo6b
@user-fj1ct1fo6b 2 месяца назад
Очень крутая подача материала, все супер легко и понятно после просмотра! Спасибо огромное!
@userJakov
@userJakov 2 года назад
спасибо. сегодня узнал что у вас есть курсы, хотя смотрел уже 10 роликов. чутка побольше рекламы своих курсов добавляйте в видео!
@andreytsapko4213
@andreytsapko4213 2 года назад
Миша, спасибо. Твоё видео помогло мне сделать фичу для тестового, закешировать результаты запроса, очень классно объясняешь! Redux-persist незаменимая штука, теперь не нужно выносить себе мозг с localstorage, потом парсить этот JSON, лукас, подписка и вот это вот всё:)
@Brunopt893
@Brunopt893 Год назад
Михаил, просто живите вечно!!!)) Спасибо вам за всегда полезную информацию!
@konglomora3230
@konglomora3230 2 года назад
Спасибо! Вы оставляете отличное информационное наследие для последующих поколений разработчиков из СНГ.
@mishanep
@mishanep 2 года назад
В мире разработки всё быстро меняется :) может быть основы вёрстки и js меняются несильно в последнее время, остальное в течение двух-трех лет может измениться до неузнаваемости :)
@dimahinev
@dimahinev 2 года назад
@@mishanep в любом случае 2-3 года хватит чтобы помочь тысячам людей
@catweb666
@catweb666 2 года назад
Когда я что то не помню всегда вспоминаю тебя :)
@user-hk3gd2fv5s
@user-hk3gd2fv5s Год назад
Супер! Быстро и по делу🤩
@user-kj9mm2gc3r
@user-kj9mm2gc3r Год назад
Спасибо за такие полезные видео! обязательно ждем новых!
@mironlive
@mironlive 6 месяцев назад
Объяснений понятнее ваших я еще не видел, спасибо!
@user-de8qy1mw4g
@user-de8qy1mw4g 2 года назад
Делала по Вашему видео туду с Redux Toolkit и по завершению задалась вопросом, как припилять local storage, чтобы после обновления страницы задачи не пропадали. И тут нахожу это видео как ответ на свой вопрос) спасибо за такой глобальный подход!
@user-zh4uk7if5r
@user-zh4uk7if5r Год назад
Спасибо за информацию! Будет круто увидить видео об использование с TypeScript
@YuriyShaklak
@YuriyShaklak Год назад
Супер. Дякую! Просто! Швидко! Зрозуміло!
@nimblex
@nimblex Год назад
Спасибо вам большое за ваши видео) Уже не первый раз выручаете
@r3dkin
@r3dkin 2 года назад
Эх... Если бы моя благодарность знала границы, но она их не знает! :) Спасибо за видео, а то иногда почитаю документацию и ещё некоторые вопросы остаються, потом сижу ломаю голову, что да как, а так посмотрел видео и всё становиться понятно. Благодарю!
@user-jz7pn6cd2q
@user-jz7pn6cd2q 2 года назад
Спасибо большое , доходчивое объяснения для начинающих)))
@user-pd4gt9zz9c
@user-pd4gt9zz9c 2 года назад
Благодарю! Добра тебе добрый человек)
@raminhesenov1376
@raminhesenov1376 2 года назад
Огромное спасибо за видео! Оказался очень полезным)
@motolife4900
@motolife4900 2 года назад
Оо, крутяк. Очень крутой разбор полезного модуля
@antoniuskonovalov
@antoniuskonovalov Год назад
Ты знаешь, я только на англ читаю и учусь, но случайно наткнулся и оч понравилось как преподносишь материал. Приобрел твой курс на Юдеми, спасибо!
@Armas0n
@Armas0n 2 года назад
Забавно, увидев этот ролик в рекомендациях и прочитав его название я задал себе вопрос "а я вообще знаю, как прикрутить редакс к local storage?" Ответив отрицательно тут же решился на просмотр. Не пожалел ни разу, теперь добавил библу себе в закладки, спасибо!
@alextotun
@alextotun 2 года назад
Благодарю за видео! Полезная штука.
@trendsgallery
@trendsgallery Год назад
спасибо за хороший ролик! очень понятно и доходчиво!!
@deantek
@deantek 2 года назад
спасибо, просто спасибо, я уже замучался индусов смотреть на ютубе, пишу приложение на React Native с Redux Toolkit, встала задача сохранять стейт, дошел до Redux Persist, в документации не так сильно разжевано, как у тебя, спасибо еще раз
@deantek
@deantek 2 года назад
Тут в видео не разжевано про сохранение стейта в глубину, если у вас есть потребность сохранять Стейт на 3 или больше уровня, то вы можете использовать библу redux-deep-persist Это просто надстройка над конфигом обычного redux-persist, очень поможет
@andrewsam224
@andrewsam224 5 месяцев назад
Миша какое же ты добро делаешь, ты да же не представляешь!!!!
@UnKnown-ur9fq
@UnKnown-ur9fq 8 месяцев назад
красавчик! как всегда лучший! все максимально просто, понятно, без лишних слов на 3 часа
@user-lc6cy3yz5p
@user-lc6cy3yz5p 4 месяца назад
Низкий поклон тебе! И от души спасибо! Ну как нельза вовремя на это видео попал! Избавил он махинаций с localStorage вручнуе..
@Ivan56792
@Ivan56792 Год назад
Спасибо за объяснения, помогло!
@daifoll9988
@daifoll9988 Год назад
Очень помог гайд, использовал для синхронизации товаров в корзине с localstorage, т.к. использую Next.js были проблемы и ошибки, но библиотека помогла, спасибо!
@user-ju8kx7fo8j
@user-ju8kx7fo8j 3 месяца назад
Однозначно респектую из сердечка. Видно, что ты любишь свое дело чувак.
@cyberslug6073
@cyberslug6073 2 года назад
Спасибо, очень полезное видео!
@bohdan-tolmachov
@bohdan-tolmachov 2 года назад
спасибо, очень помогли, делал логинку для сайта и принцип очень похожий
@vladimirvalko1108
@vladimirvalko1108 2 года назад
Как же вовремя в рекомендации выпало это видео, я как раз ломал голову, как бы мне залить свой стор в Локал сторэдж) Ну думаю расслаблю мозг, залипну на 15 минут в ютьюбчик, а тут бац! 👌🏻😁 Спасибо огромное за информацию 👍🏻
@user-qq6yg7bg3f
@user-qq6yg7bg3f 2 года назад
Спасибо, видео очень помогло😊
@copypasten
@copypasten Год назад
отлично объяснение, спасибо большое
@MB_Travel
@MB_Travel 7 месяцев назад
Крутая штука, спасибо!
@voytko1994
@voytko1994 2 года назад
Живи вечно! Здоровья и благополучия тебе, добрый человек!!!
@mishanep
@mishanep 2 года назад
Спасибо =)
@AndrewFloatrx
@AndrewFloatrx 2 года назад
Когда-то писал свой велосипед по этой теме через extraReducers. Тоже работало на ура. Но на днях решил провести рефакторинг старого проекта, и ресерчил тему синка с ls. Нашел утром персист) почитал доку и вот... RU-vid уже предлагает глянуть видос по теме... Прикольно! Утром прикручу)))
@dr_morpho
@dr_morpho 2 года назад
Спасибо вам, Михаил ))
@velikorossnationalist4259
@velikorossnationalist4259 Год назад
Было бы здорово увидеть еще в связке с TypeScript --- Redux-Persist
@vladimirplyukhin5234
@vladimirplyukhin5234 2 года назад
Михаил, спасибо!
@from_brest2631
@from_brest2631 2 года назад
Миша - красавчик, как обычно :) Я то как-то в петпроекте персистил стор без либы, по гайду Дэна Абрамова :)
@EvgenichTalagaev
@EvgenichTalagaev Год назад
Спасибо вам большое)
@TovarischNah
@TovarischNah 2 года назад
спасибо, очень помогло это видео
@dpol7259
@dpol7259 2 года назад
Спасбо, очень usefull :)
@romaroma7514
@romaroma7514 Год назад
шикарно!
@igoryakib6732
@igoryakib6732 2 года назад
Спасибо большое
@27sosite73
@27sosite73 Год назад
Мішка, дякую
@vlasovdanildev
@vlasovdanildev 2 года назад
Спасибо Михаил, попробуйте сделать на реакте Google keep, думаю будет интересно)
@rasimhesenov3848
@rasimhesenov3848 2 года назад
spasibo brat
@user-jm8sr1qf5t
@user-jm8sr1qf5t Год назад
спасибо друг)))
@user-gy9is8ut5m
@user-gy9is8ut5m Год назад
Браво
@otabekfayziev7076
@otabekfayziev7076 2 года назад
круто!
@sivkaburka1062
@sivkaburka1062 2 года назад
Доделал до конца
@do_bro
@do_bro Год назад
совсем просто, оказывается. А то я мучался с кастомными решениями
@vladheranin
@vladheranin 2 года назад
дякую
@user-di5lg3dh7f
@user-di5lg3dh7f Год назад
Nice my friend
@vadimniziev5489
@vadimniziev5489 2 года назад
Спасибо! Вот единственно чем редакс напрягает, это бесконечное количество дополнительных манипуляций, чтоб подключить что то допом. Можно было в сам тулкит встроить этот персист, и по флагу true его включать...Но нет, надо тащить еще кучу всего))) За ролик отдельная благодарность)
@ruslanaliyev3765
@ruslanaliyev3765 2 года назад
Такая философия реакта... Нихрена не давать из коробки
@vadimniziev5489
@vadimniziev5489 2 года назад
@@ruslanaliyev3765 да реакт то понятно...вопрос к тулкиту...почему санки засунули к себе, а работу с локальным хранилищм нет)
@mishanep
@mishanep 2 года назад
Может ещё добавят :) thunk тоже не сразу появился)
@wh1teb1ack92
@wh1teb1ack92 2 года назад
Я говорю, пока они раздупляться с этим реактом, чтобы он работал нормально без миллиона непонятных библиотек, уже выпустят какой-то другой фреймворк, или весь вэб перейдет куда-то. Клепать одно, потом делать другое, но всё равно не доработав до ума - это прям про реакт.
@user-fy3yd7dt8d
@user-fy3yd7dt8d Год назад
Круто! А как это штука будет со Svelte работать?
@dispeltr1183
@dispeltr1183 2 года назад
Спасибо за видео Михаил! Скажите пожалуйста, планируется ли подобное видео по Redux-Saga?
@mishanep
@mishanep 2 года назад
Пока не планирую. По redux saga есть несколько русскоязычных циклов на других каналах, они актуальные.
@Awe88Some
@Awe88Some 7 месяцев назад
2:50 - Михаил, redux произносится как "рИдакс", если говорить конкретно про программирование, либо "ридАкс", если в значении "сокращение", но британское произношение даже в контексте программирования звучит как "ридАкс", но всегда не "рЕдакс" вот несколько примеров произношения: 1. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T0elp5K9lLg.html 2. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iXskCHA8QCk.htmlsi=YbCXtGsZz5aHB94g&t=5650 3. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7fdQJ5ry_NI.htmlsi=6GGb44XbKT_clcWl&t=1640 4. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5XntRkFWpuw.htmlsi=nEdDE9oEIGSrn20o&t=307 5. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dfsyABvzpj0.htmlsi=9WMEvnHRyLTH82mC&t=102 6. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4X4tCIJeo8w.htmlsi=tNzxFi7H_FespOJt&t=754
@vladi4507
@vladi4507 11 месяцев назад
@mishanep Хорошее видео! Большое Вам спасибо за ваш труд и потраченное время. Возник небольшой вопрос, возможно есть идея записать такое видео. Как бы Вы настраивали redux на случай когда пользователь залогинен и данные нужно синхронизировать и сохранять в базу и наоборот когда пользователь только зарегистрировался и данные нужно перенести в базу?
@ayaznamazov8328
@ayaznamazov8328 8 месяцев назад
решил вопрос? как?
@user-rl8qw2jf8r
@user-rl8qw2jf8r 2 года назад
Мне особенно сложно даются эти "моменты", вроде того как toolkit дружить с другими библиотеками redux, как его настроить для работы с observable я так и не понял(
@crabsburger501
@crabsburger501 Год назад
Михаил было ли у вас что redux-persist не сохранял в localstorage? Я использую RTK query, на stack overflow уже смотрел и ничего не помогло, просто пустой массив как на 10:35 в видео, и туда не хочет добавляется ничего
@mishanep
@mishanep Год назад
RTK query по своей сути задуман несколько для другого. Стейт-менеджером в данном случае является сервер, а инструменты вроде данного или его аналогов (SWR, react-query) постоянно получают обновления. В том числе распространен паттерн, когда данные инструменты запрашивают обновления, если какое-то время окно с сайтом было неактивно. Я не пробовал хранить данные с rtk query через persist, но, повторюсь, выглядит так, что задумано по-другому.
@user-hf2uf6qy5s
@user-hf2uf6qy5s 6 месяцев назад
kruto
@alxanbayramov9128
@alxanbayramov9128 2 года назад
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?
@mishanep
@mishanep 2 года назад
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.
@alxanbayramov9128
@alxanbayramov9128 2 года назад
@@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
@mishanep
@mishanep 2 года назад
@@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.
@alxanbayramov9128
@alxanbayramov9128 2 года назад
@@mishanep thanks a lot
@functiondead4841
@functiondead4841 11 месяцев назад
почему то не работает с новым nextjs при обновлении страницы все равно стейты слетают
@semen083
@semen083 Год назад
Можно ли как-то отловить событие закрытия вкладки и очистить localstorage?
@mishanep
@mishanep Год назад
Можно. Но если вам надо очищать данные при закрытии - просто используйте SessionStorage.
@egore_burial
@egore_burial 2 года назад
редУкс, редАкс, госсподи, блин, ааааааааа
@antivirus401
@antivirus401 Год назад
у меня *getDefaultMiddleware is not a function* почему?
@true227
@true227 9 месяцев назад
@mishanep Михаил, а ведь это нормально не знать наизусть как все это пишется, если разбудить в 3 ночи, а просто представлять, что тот или иной функционал существует в принципе и в случае необходимости просто идти вспоминать его, ну или гуглить/стаковерфлоу/спрашивать в группах ? Объем информации же огромен, как это все можно помнить, особенно, если не каждый день это пишешь
@mishanep
@mishanep 9 месяцев назад
Конечно. Многие вещи мы делаем один-два раза при создании проекта. И чаще всего по документации.
@ayaznamazov8328
@ayaznamazov8328 8 месяцев назад
да, такой же вопрос возникает
@sherkhaniskender7403
@sherkhaniskender7403 Год назад
redux-persist failed to create sync storage. falling back to noop storage. Меня данная ошибка беспокоит, тут нашел решение через noopStorage, но не знаю, насколько это корректное решение. Был бы рад, если отпишитесь по этому поводу
@mishanep
@mishanep Год назад
Не сталкивался с такой проблематикой.
@aaaaaaaaaaaaaaaaa8296
@aaaaaaaaaaaaaaaaa8296 Год назад
у меня ошибка из за TS когда передаю persistor в PersistGate. а как это исправить? памагитеее
@mishanep
@mishanep Год назад
В документации redux toolkit есть страница, описывающая как быть с типами при использовании persist.
@The14Some1
@The14Some1 Год назад
Ден Абрамов на своих стримах говорит "Редáкс"
@andreass1842
@andreass1842 Год назад
Либа уже три года не обновлялась. Насколько это критично?
@user-ne5mx4bx4k
@user-ne5mx4bx4k 8 месяцев назад
Просто и доступно. спасибо бро )
Далее
Типизация для Redux Toolkit
22:24
Просмотров 40 тыс.
skibidi toilet zombie universe 34 ( New Virus)
03:35
Просмотров 2,3 млн
React Query. Быстрый старт
30:09
Просмотров 48 тыс.
Redux - Complete Tutorial (with Redux Toolkit)
37:01
Просмотров 167 тыс.