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

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

[@user-rl8qw2jf8r]

Пусть хранят тебя все силы, добрый человек. Без вас я себе весь мозг вывихнул. Огромное вам спасибо!

[@bur5153]

+1, уже 3 час разбираюсь как сохранять корзину товаров в локале и взаимодействовать с удалением через toolkit

[@andrewsam224]

Присоединяйтесь!!!!!! Можно сказать спасает некоторых людей от суицида!!!

[@ilysov]

Как вы приятно все объясняете! "Provider обнимает наше приложение" - растекся в улыбке, как будто меня вместе с приложением обняли))

[@neodinok-it3ym]

Самые адекватные уроки по redux без воды, спасибо

[@user-fj1ct1fo6b]

Очень крутая подача материала, все супер легко и понятно после просмотра! Спасибо огромное!

[@black_light]

Отличный туториал. Спасибо за Ваш труд!

[@suspenseorigin5542]

Я смог вникнуть в основы реакт и редакс только благодаря вашим урокам. Спасибо вам большое, Михаил!

[@bake5448]

Смог настроить whitelist?

[@user-qc1cn4dl8q]

Большое спасибо, Михаил. Не могу остановиться смотреть Ваши видео. Все очень доходчиво и понятно.

[@RonaMelone]

Михаил, и снова спасибо) У вас как обычно, потрясающая подача информации. Благодарю за ваши труды👍

[@nic3guy]

Михаил, спасибо Вам огромное. До Вашего видео мне приходилось всю логику с localStorage писать в санках (redux-thunk), а тут вот как все просто

[@user-ju8kx7fo8j]

Однозначно респектую из сердечка. Видно, что ты любишь свое дело чувак.

[@alexeylipov876]

Миллион лайков вам! Голову сломал по этой теме, ваше видео помогло разобраться:) спасибо вам Михаил!

[@user-zh4uk7if5r]

Спасибо за информацию! Будет круто увидить видео об использование с TypeScript

[@Brunopt893]

Михаил, просто живите вечно!!!)) Спасибо вам за всегда полезную информацию!

[@andreytsapko4213]

Миша, спасибо. Твоё видео помогло мне сделать фичу для тестового, закешировать результаты запроса, очень классно объясняешь! Redux-persist незаменимая штука, теперь не нужно выносить себе мозг с localstorage, потом парсить этот JSON, лукас, подписка и вот это вот всё:)

[@andreysamaev6966]

коротко и гениально, спасибо!! которій раз убеждаюсь в твоем таланте лекторства)

[@userJakov]

спасибо. сегодня узнал что у вас есть курсы, хотя смотрел уже 10 роликов. чутка побольше рекламы своих курсов добавляйте в видео!

[@abolnikov]

Михаил! Спасибо за ваш труд. Я как раз сейчас в поиске своей первой работы и пытаюсь оптимизировать решение Домашних Заданий, что дают на собеседовании. И всё больше сталкиваюсь что Редакс Персист или Редакс Тулкит упрощают жизнь, а на Вашем канале как раз есть все нужные ролики, не затянутые по времени и достаточно подробно разобраны. Т.к. в моей стране Джунов не ищут, а все уже должны быть синьорами, приходиться рисовать "виртуальный" опыт. А это несет под собой некоторые сложности в рассказе, а вот после Ваших роликов, рассказывать "как я делал" тот или иной проект, становиться проще) Ещё раз спасибо огромное за Труд!!!!!

[@user-kj9mm2gc3r]

Спасибо за такие полезные видео! обязательно ждем новых!

[@catweb666]

Когда я что то не помню всегда вспоминаю тебя :)

[@user-hk3gd2fv5s]

Супер! Быстро и по делу🤩

[@user-de8qy1mw4g]

Делала по Вашему видео туду с Redux Toolkit и по завершению задалась вопросом, как припилять local storage, чтобы после обновления страницы задачи не пропадали. И тут нахожу это видео как ответ на свой вопрос) спасибо за такой глобальный подход!

[@nimblex]

Спасибо вам большое за ваши видео) Уже не первый раз выручаете

[@mironlive]

Объяснений понятнее ваших я еще не видел, спасибо!

[@konglomora3230]

Спасибо! Вы оставляете отличное информационное наследие для последующих поколений разработчиков из СНГ.

[@mishanep]

В мире разработки всё быстро меняется :) может быть основы вёрстки и js меняются несильно в последнее время, остальное в течение двух-трех лет может измениться до неузнаваемости :)

[@daimon31999]

@@mishanep в любом случае 2-3 года хватит чтобы помочь тысячам людей

[@user-jz7pn6cd2q]

Спасибо большое , доходчивое объяснения для начинающих)))

[@raminhesenov1376]

Огромное спасибо за видео! Оказался очень полезным)

[@user-pd4gt9zz9c]

Благодарю! Добра тебе добрый человек)

[@antonkonovalov8902]

Ты знаешь, я только на англ читаю и учусь, но случайно наткнулся и оч понравилось как преподносишь материал. Приобрел твой курс на Юдеми, спасибо!

[@r3dkin]

Эх... Если бы моя благодарность знала границы, но она их не знает! :) Спасибо за видео, а то иногда почитаю документацию и ещё некоторые вопросы остаються, потом сижу ломаю голову, что да как, а так посмотрел видео и всё становиться понятно. Благодарю!

[@motolife4900]

Оо, крутяк. Очень крутой разбор полезного модуля

[@alextotun]

Благодарю за видео! Полезная штука.

[@trendsgallery]

спасибо за хороший ролик! очень понятно и доходчиво!!

[@andrewsam224]

Миша какое же ты добро делаешь, ты да же не представляешь!!!!

[@daifoll9988]

Очень помог гайд, использовал для синхронизации товаров в корзине с localstorage, т.к. использую Next.js были проблемы и ошибки, но библиотека помогла, спасибо!

[@deantek]

спасибо, просто спасибо, я уже замучался индусов смотреть на ютубе, пишу приложение на React Native с Redux Toolkit, встала задача сохранять стейт, дошел до Redux Persist, в документации не так сильно разжевано, как у тебя, спасибо еще раз

[@deantek]

Тут в видео не разжевано про сохранение стейта в глубину, если у вас есть потребность сохранять Стейт на 3 или больше уровня, то вы можете использовать библу redux-deep-persist Это просто надстройка над конфигом обычного redux-persist, очень поможет

[@Ivan56792]

Спасибо за объяснения, помогло!

[@bohdan-tolmachov]

спасибо, очень помогли, делал логинку для сайта и принцип очень похожий

[@cyberslug6073]

Спасибо, очень полезное видео!

[@user-qq6yg7bg3f]

Спасибо, видео очень помогло😊

[@copypasten]

отлично объяснение, спасибо большое

[@user-lc6cy3yz5p]

Низкий поклон тебе! И от души спасибо! Ну как нельза вовремя на это видео попал! Избавил он махинаций с localStorage вручнуе..

[@velikorossnationalist4259]

Было бы здорово увидеть еще в связке с TypeScript --- Redux-Persist

[@voytko1994]

Живи вечно! Здоровья и благополучия тебе, добрый человек!!!

[@mishanep]

Спасибо =)

[@YuriyShaklak]

Супер. Дякую! Просто! Швидко! Зрозуміло!

[@UnKnown-ur9fq]

красавчик! как всегда лучший! все максимально просто, понятно, без лишних слов на 3 часа

[@slowmoka]

Не поскуплюсь на комент, все очень хорошо и доходчиво!

[@MB_Travel]

Крутая штука, спасибо!

[@from_brest2631]

Миша - красавчик, как обычно :) Я то как-то в петпроекте персистил стор без либы, по гайду Дэна Абрамова :)

[@vladimirvalko1108]

Как же вовремя в рекомендации выпало это видео, я как раз ломал голову, как бы мне залить свой стор в Локал сторэдж) Ну думаю расслаблю мозг, залипну на 15 минут в ютьюбчик, а тут бац! 👌🏻😁 Спасибо огромное за информацию 👍🏻

[@TovarischNah]

спасибо, очень помогло это видео

[@Armas0n]

Забавно, увидев этот ролик в рекомендациях и прочитав его название я задал себе вопрос "а я вообще знаю, как прикрутить редакс к local storage?" Ответив отрицательно тут же решился на просмотр. Не пожалел ни разу, теперь добавил библу себе в закладки, спасибо!

[@vladimirplyukhin5234]

Михаил, спасибо!

[@dr_morpho]

Спасибо вам, Михаил ))

[@EvgenichTalagaev]

Спасибо вам большое)

[@AndrewFloatrx]

Когда-то писал свой велосипед по этой теме через extraReducers. Тоже работало на ура. Но на днях решил провести рефакторинг старого проекта, и ресерчил тему синка с ls. Нашел утром персист) почитал доку и вот... KZbin уже предлагает глянуть видос по теме... Прикольно! Утром прикручу)))

[@igoryakib6732]

Спасибо большое

[@dpol7259]

Спасбо, очень usefull :)

[@romaroma7514]

шикарно!

[@vlasovdanildev]

Спасибо Михаил, попробуйте сделать на реакте Google keep, думаю будет интересно)

[@rasimhesenov3848]

spasibo brat

[@user-jm8sr1qf5t]

спасибо друг)))

[@otabekfayziev7076]

круто!

[@sivkaburka1062]

Доделал до конца

[@user-gy9is8ut5m]

Браво

[@vadimniziev5489]

Спасибо! Вот единственно чем редакс напрягает, это бесконечное количество дополнительных манипуляций, чтоб подключить что то допом. Можно было в сам тулкит встроить этот персист, и по флагу true его включать...Но нет, надо тащить еще кучу всего))) За ролик отдельная благодарность)

[@ruslanaliyev3765]

Такая философия реакта... Нихрена не давать из коробки

[@vadimniziev5489]

@@ruslanaliyev3765 да реакт то понятно...вопрос к тулкиту...почему санки засунули к себе, а работу с локальным хранилищм нет)

[@mishanep]

Может ещё добавят :) thunk тоже не сразу появился)

[@wh1teb1ack92]

Я говорю, пока они раздупляться с этим реактом, чтобы он работал нормально без миллиона непонятных библиотек, уже выпустят какой-то другой фреймворк, или весь вэб перейдет куда-то. Клепать одно, потом делать другое, но всё равно не доработав до ума - это прям про реакт.

[@dispeltr1183]

Спасибо за видео Михаил! Скажите пожалуйста, планируется ли подобное видео по Redux-Saga?

[@mishanep]

Пока не планирую. По redux saga есть несколько русскоязычных циклов на других каналах, они актуальные.

[@27sosite73]

Мішка, дякую

[@user-di5lg3dh7f]

Nice my friend

[@vladi4507]

@mishanep Хорошее видео! Большое Вам спасибо за ваш труд и потраченное время. Возник небольшой вопрос, возможно есть идея записать такое видео. Как бы Вы настраивали redux на случай когда пользователь залогинен и данные нужно синхронизировать и сохранять в базу и наоборот когда пользователь только зарегистрировался и данные нужно перенести в базу?

[@ayaznamazov8328]

решил вопрос? как?

[@user-fy3yd7dt8d]

Круто! А как это штука будет со Svelte работать?

[@vladheranin]

дякую

[@do_bro]

совсем просто, оказывается. А то я мучался с кастомными решениями

[@user-rl8qw2jf8r]

Мне особенно сложно даются эти "моменты", вроде того как toolkit дружить с другими библиотеками redux, как его настроить для работы с observable я так и не понял(

[@Awe88Some]

2:50 - Михаил, redux произносится как "рИдакс", если говорить конкретно про программирование, либо "ридАкс", если в значении "сокращение", но британское произношение даже в контексте программирования звучит как "ридАкс", но всегда не "рЕдакс" вот несколько примеров произношения: 1. kzbin.info/www/bejne/imHInaNrgJ6fgsk 2. kzbin.info/www/bejne/n4nWnHZ-dp2Eec0si=YbCXtGsZz5aHB94g&t=5650 3. kzbin.info/www/bejne/bZfHgn1rp96ShKssi=6GGb44XbKT_clcWl&t=1640 4. kzbin.info/www/bejne/a4nRpYWhe7yjq9ksi=nEdDE9oEIGSrn20o&t=307 5. kzbin.info/www/bejne/mpfWqnR4q9-joJIsi=9WMEvnHRyLTH82mC&t=102 6. kzbin.info/www/bejne/aomXpXZ_f8qibtksi=tNzxFi7H_FespOJt&t=754

[@crabsburger501]

Михаил было ли у вас что redux-persist не сохранял в localstorage? Я использую RTK query, на stack overflow уже смотрел и ничего не помогло, просто пустой массив как на 10:35 в видео, и туда не хочет добавляется ничего

[@mishanep]

RTK query по своей сути задуман несколько для другого. Стейт-менеджером в данном случае является сервер, а инструменты вроде данного или его аналогов (SWR, react-query) постоянно получают обновления. В том числе распространен паттерн, когда данные инструменты запрашивают обновления, если какое-то время окно с сайтом было неактивно. Я не пробовал хранить данные с rtk query через persist, но, повторюсь, выглядит так, что задумано по-другому.

[@semen083]

Можно ли как-то отловить событие закрытия вкладки и очистить localstorage?

[@mishanep]

Можно. Но если вам надо очищать данные при закрытии - просто используйте SessionStorage.

[@functiondead4841]

почему то не работает с новым nextjs при обновлении страницы все равно стейты слетают

[@alxanbayramov9128]

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]

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]

@@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]

@@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]

@@mishanep thanks a lot

[@user-hf2uf6qy5s]

kruto

[@true227]

@mishanep Михаил, а ведь это нормально не знать наизусть как все это пишется, если разбудить в 3 ночи, а просто представлять, что тот или иной функционал существует в принципе и в случае необходимости просто идти вспоминать его, ну или гуглить/стаковерфлоу/спрашивать в группах ? Объем информации же огромен, как это все можно помнить, особенно, если не каждый день это пишешь

[@mishanep]

Конечно. Многие вещи мы делаем один-два раза при создании проекта. И чаще всего по документации.

[@ayaznamazov8328]

да, такой же вопрос возникает

[@antivirus401]

у меня *getDefaultMiddleware is not a function* почему?

[@aaaaaaaaaaaaaaaaa8296]

у меня ошибка из за TS когда передаю persistor в PersistGate. а как это исправить? памагитеее

[@mishanep]

В документации redux toolkit есть страница, описывающая как быть с типами при использовании persist.

[@sherkhaniskender7403]

redux-persist failed to create sync storage. falling back to noop storage. Меня данная ошибка беспокоит, тут нашел решение через noopStorage, но не знаю, насколько это корректное решение. Был бы рад, если отпишитесь по этому поводу

[@mishanep]

Не сталкивался с такой проблематикой.

[@egore_burial]

редУкс, редАкс, госсподи, блин, ааааааааа

[@The14Some1]

Ден Абрамов на своих стримах говорит "Редáкс"

[@andreass1842]

Либа уже три года не обновлялась. Насколько это критично?

[@user-ne5mx4bx4k]

Просто и доступно. спасибо бро )