Тёмный

Reselect для оптимизации Redux стора 

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

Когда необходимо преобразовать данные перед выборкой или собрать информацию с нескольких ответвлений стора библиотека Reselect одновременно упрощает задачу и делает ее более оптимальной. Redux Toolkit в свою очередь содержит Reselect в качестве дочерней зависимости.
Код из видео github.com/michey85/redux-too...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

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

 

31 май 2022

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 64   
@user-px9pp4nz5m
@user-px9pp4nz5m 2 года назад
Михаил очень понравился Ваш курс по Redux, ждем курс по TS)
@olegsh2888
@olegsh2888 2 года назад
За Redux Toolkit всегда лайк! Забавно, что именно сегодня на кодревью получил замечание, что надо переписать на createSelector свой код)) Так что, можно сказать, что это не просто теория, а вполне себе рабочая задача)
@user-vm2db5cq1g
@user-vm2db5cq1g Год назад
Отличный контент! Автору спасибо!
@KGMelis
@KGMelis 2 года назад
Михаил, спасибо большое! благодаря вашего контента токо понял весь прелесть тулкита и слайсов
@bagga_lev
@bagga_lev 2 года назад
Большое спасибо =) Очень хорошо объясняете
@user-qj6ns8ot3l
@user-qj6ns8ot3l 2 года назад
Классное объяснение. Спасибо!
@andrewsam224
@andrewsam224 6 месяцев назад
Как я Вам благодарен Михаил!!!
@TheMaxfri
@TheMaxfri 2 года назад
Михаил, спасибо большое за ваши видео. Было бы интересно послушать про продвинутый rtk query, отлавливание ошибок и с чем ещё можно столкнуться в реальной работе.
@artman9592
@artman9592 2 года назад
Тоже интересно
@andrewsam224
@andrewsam224 6 месяцев назад
Да про ошибки было бы круто, тоже завис на этой теме!!!!
@TRIZ-Bogatyregold
@TRIZ-Bogatyregold 11 месяцев назад
Михаил спасибо за видео. Полезный контент redux reselect!
@user-rz1kq8oz4f
@user-rz1kq8oz4f 2 года назад
Большое спасибо! отличное видео
@fpsska2028
@fpsska2028 2 года назад
Спасибо, Михаил 😌
@disconnect355
@disconnect355 2 года назад
Спасибо, было полезно!
@nizom333
@nizom333 2 года назад
Спасибо отличный видео
@mikhail_shokun
@mikhail_shokun 2 года назад
Красава как всегда!
@user-kn3ut1sh2o
@user-kn3ut1sh2o 2 года назад
Спасибо, было полезно! (Reselect)
@dirty_arkady
@dirty_arkady 2 года назад
Спасибо!
@yaroslavom-js6983
@yaroslavom-js6983 2 года назад
Спасибо )
@kruboy1605
@kruboy1605 2 года назад
молодець!
@vladimirplyukhin5234
@vladimirplyukhin5234 2 года назад
Михаил, спасибо вам! Вы стали уже как наставник мне! Потому что живя в сельской местности, нет особой возможности покупать платные курсы. А вы очень хорошо объясняете и помогаете тем самым незаменимо! Как устроюсь на джуна, обязательно куплю у вас курсы на Udemy в знак благодарности!
@localhost666
@localhost666 Год назад
Устроился?
@vladimirplyukhin5234
@vladimirplyukhin5234 Год назад
@@localhost666 Уже да, но ищу дальше
@localhost666
@localhost666 Год назад
@@vladimirplyukhin5234 обещание сдержал?
@vladimirplyukhin5234
@vladimirplyukhin5234 Год назад
@@localhost666 ахахаха мэни, ты что здесь как интернет-совесть? Но да, есть там неплохой курс по Redux.
@localhost666
@localhost666 Год назад
@@vladimirplyukhin5234 неблагодарный
@artman9592
@artman9592 2 года назад
спасибо
@alexleshenko
@alexleshenko Год назад
Только подумал, а че я ресилект забыл в своем проекте и видос выскочил, значит мысль верна 😂😂
@user-fv4xc4qp2h
@user-fv4xc4qp2h 2 года назад
Михаил, снимите, пожалуйста, видео про обработку ошибок - как лучше отображать пользователю, что некий запрос не сработал - может какой-нибудь попап в углу экрана для общих случаев, и отдельно для частных. + Очень хочется видео про мульти запросы на API (наверное есть возможность через редакс или по старинке циклом по массиву)
@dispeltr1183
@dispeltr1183 2 года назад
для отображений ошибок юзеру есть либа react-toastify. Про мульти запросы посмотри в сторону Promise.all и Promise.race
@johndoe034
@johndoe034 2 года назад
Михаил, спасибо за отличный контент! Есть пара вопросов, буду благодарен за ответ: 1. Насколько сейчас распространена практика использования Redux Toolkit в коммерческих проектах по сравнению с обычным Redux? 2. Насколько актуальными остаются саги в связи с популярностью Redux Toolkit, в котором Thunk идет из коробки?
@mishanep
@mishanep 2 года назад
С сагами мне в принципе не доводилось работать, поэтому сложно ответить на этот вопрос. Они решают много задач и уже по проекту надо смотреть актуальность использование этого дополнения к редаксу. Касаемо тулкита, то он всё чаще и чаще встречается в свежих проектах. Легаси, конечно, не спешит переезжать на современные рельсы, но тулкит намного актуальнее. С ним проще работать и он очевиднее типизируется.
@romeshfarhod-zoda8892
@romeshfarhod-zoda8892 2 года назад
красава
@nizom333
@nizom333 2 года назад
TOP
@MrMomomoy
@MrMomomoy 2 года назад
Михаил, спасибо за очередное отличное видео. Скажите пожалуйста, не планируете ли снять видео на тему вебсокетов?
@mishanep
@mishanep 2 года назад
Здравствуйте. Про вебсокеты пока не планирую. Почти не имел с ним дела в реальной практике.
@MrMomomoy
@MrMomomoy 2 года назад
@@mishanep , понял. не сочтите за наглость, но может снимете видео про Firebase авторизацию с помощью гугла, или соцсетей? Думаю, многим будет эта тема интересна
@user-nv6fm4pl4w
@user-nv6fm4pl4w 2 года назад
@@MrMomomoy Так уже Михаил снимал такое видео)
@user-fv4xc4qp2h
@user-fv4xc4qp2h 2 года назад
Перенёс селекторы)
@alexvoid8717
@alexvoid8717 Год назад
Для меня после прочтения документации редакса осталась не вполне понятной тема размера кэша. В документации редакса рекомендуют передавать id в качестве пропсов и в потомке селектором доставать данные сущности (если без rtk query), в react-redux доке: when the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance. В случае, если передаем только id, а потом выбираем по id, нужно создавать factory function?
@maksymkyryliuk492
@maksymkyryliuk492 2 года назад
Михаил, прекрасное видео Но у меня вопрос как можно добавить к тулкиту Redux-Axios-Middleware сколько смотрел документацию не нашел этого, просто это было бы очень полезно если хочешь Interceptor к запросам сделать
@---Maksim---
@---Maksim--- 2 года назад
А что там сложного? Создаешь отдельно service с конфигом interceptor-а для axios, вместо fetch-а юзаешь свой service в slice.
@maksymkyryliuk492
@maksymkyryliuk492 2 года назад
@@---Maksim--- Хмм... Спасибо, надо попробовать👍🏻
@user-wr4br7sr9q
@user-wr4br7sr9q 2 года назад
Кто нибудь знает как мемоизировать отдельное значение из Redux? Все функции со стейтом я с помощью reselect реализовал, но отдельные значения все равно вызывают ререндер?
@romanmed9035
@romanmed9035 Год назад
вот вообще непонятно в какой момент что сделано что стало совсем не так. ибо альтернативес было и перерендеривалось, а потом убрали и оно стало все хорошо. а на саму суть ушло пара секунд.
@kosechok1
@kosechok1 Год назад
Михаил, спасибо подскажите а как все это будет в случае если список подгружается через апи? у меня получается что функция начинает применяться раньше чем происходит асинхронный thunk?
@mishanep
@mishanep Год назад
Приветствую, Константин. Reselect ничего не знает про санки. Если значение в сторе изменилось, то оно обновится и в UI. Возможно вы меняете значение в момент запроса, а потом повторно - уже при получении данных.
@kosechok1
@kosechok1 Год назад
@@mishanep я понимаю, что он не знает. Просто он начинает выполняться до того как данные успевают поступить в стор. Что-то не с работой с промисом. По этому интересно было бы посмотреть на ваш урок
@alexvoid8717
@alexvoid8717 Год назад
@@kosechok1 селекторы запускаются при каждом диспатче в стор, если я правильно понял вопрос (useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched). Санки, созданные через createAsyncThunk, диспатчат .pending/.fulfilled/.rejected
@ssurrokk
@ssurrokk 2 года назад
спасибо . Как называется плагин который выделяет блоки кода у тебя?
@mishanep
@mishanep 2 года назад
Приветствую. Не совсем понимаю о каком конкретно выделении идет речь.
@ssurrokk
@ssurrokk 2 года назад
@@mishanep когда блок выбираешь, то рисуется линия влево и вниз, выделяя таким образом его
@iGotton
@iGotton 2 года назад
+
@vitya.obolonsky
@vitya.obolonsky 10 месяцев назад
Так а причем тема к активному фильтру? Rerender не должен бить. При отправке действия useSelector() выполняется эталонное сравнение предыдущего значения результата селектора и текущего значения результата. Если они разные, компонент будет вынужден выполнить повторный рендеринг.
@dmitry7464
@dmitry7464 2 года назад
useSelector проверяет ссылки и они у вас каждый раз новые, кто-нибудь. разбирался как это работает внутри?
@dmitry7464
@dmitry7464 2 года назад
Reselect checks for changes using reference equality (===). This means that you have to respect the Redux expectation that your store’s properties are immutable. If your reducers modify some data within the state.items array without returning a new object reference, the selector will not detect a new argument, and you will receive a cached item when you expect to receive the newest one.
@mishanep
@mishanep 2 года назад
Там есть вариант сравнения по дефолту, но при желании можно собственный алгоритм предложить.
@user-vk1id6md6o
@user-vk1id6md6o 2 года назад
плохо что без тайпскрипта
@lesters
@lesters Год назад
я думаю еще стоило упомянуть что createSelector нельзя использовать в самих редьюсерах
@morph2049
@morph2049 2 года назад
спасибо
Далее
OG Buda - Сделай Мне Приятно Щас
02:24
Типизация для Redux Toolkit
22:24
Просмотров 40 тыс.