Reselect для оптимизации Redux стора
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2022
- Когда необходимо преобразовать данные перед выборкой или собрать информацию с нескольких ответвлений стора библиотека Reselect одновременно упрощает задачу и делает ее более оптимальной. Redux Toolkit в свою очередь содержит Reselect в качестве дочерней зависимости.
Код из видео 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)
Классное объяснение. Спасибо!
Спасибо, Михаил 😌
Большое спасибо! отличное видео
Спасибо, было полезно!
Большое спасибо =) Очень хорошо объясняете
Спасибо отличный видео
Отличный контент! Автору спасибо!
За Redux Toolkit всегда лайк! Забавно, что именно сегодня на кодревью получил замечание, что надо переписать на createSelector свой код)) Так что, можно сказать, что это не просто теория, а вполне себе рабочая задача)
Михаил, спасибо большое! благодаря вашего контента токо понял весь прелесть тулкита и слайсов
Красава как всегда!
Как я Вам благодарен Михаил!!!
Михаил очень понравился Ваш курс по Redux, ждем курс по TS)
Михаил спасибо за видео. Полезный контент redux reselect!
Михаил, спасибо большое за ваши видео. Было бы интересно послушать про продвинутый rtk query, отлавливание ошибок и с чем ещё можно столкнуться в реальной работе.
Тоже интересно
Да про ошибки было бы круто, тоже завис на этой теме!!!!
Спасибо, было полезно! (Reselect)
Спасибо!
Спасибо )
спасибо
молодець!
красава
Только подумал, а че я ресилект забыл в своем проекте и видос выскочил, значит мысль верна 😂😂
Михаил, спасибо вам!
Вы стали уже как наставник мне! Потому что живя в сельской местности, нет особой возможности покупать платные курсы. А вы очень хорошо объясняете и помогаете тем самым незаменимо!
Как устроюсь на джуна, обязательно куплю у вас курсы на Udemy в знак благодарности!
Устроился?
@@localhost666 Уже да, но ищу дальше
@@vladimirplyukhin5234 обещание сдержал?
@@localhost666 ахахаха мэни, ты что здесь как интернет-совесть?
Но да, есть там неплохой курс по Redux.
@@vladimirplyukhin5234 неблагодарный
TOP
Михаил, снимите, пожалуйста, видео про обработку ошибок - как лучше отображать пользователю, что некий запрос не сработал - может какой-нибудь попап в углу экрана для общих случаев, и отдельно для частных. + Очень хочется видео про мульти запросы на API (наверное есть возможность через редакс или по старинке циклом по массиву)
для отображений ошибок юзеру есть либа react-toastify. Про мульти запросы посмотри в сторону Promise.all и Promise.race
Михаил, спасибо за отличный контент!
Есть пара вопросов, буду благодарен за ответ:
1. Насколько сейчас распространена практика использования Redux Toolkit в коммерческих проектах по сравнению с обычным Redux?
2. Насколько актуальными остаются саги в связи с популярностью Redux Toolkit, в котором Thunk идет из коробки?
С сагами мне в принципе не доводилось работать, поэтому сложно ответить на этот вопрос. Они решают много задач и уже по проекту надо смотреть актуальность использование этого дополнения к редаксу.
Касаемо тулкита, то он всё чаще и чаще встречается в свежих проектах. Легаси, конечно, не спешит переезжать на современные рельсы, но тулкит намного актуальнее. С ним проще работать и он очевиднее типизируется.
Для меня после прочтения документации редакса осталась не вполне понятной тема размера кэша. В документации редакса рекомендуют передавать 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?
Перенёс селекторы)
Кто нибудь знает как мемоизировать отдельное значение из Redux? Все функции со стейтом я с помощью reselect реализовал, но отдельные значения все равно вызывают ререндер?
Михаил, спасибо за очередное отличное видео. Скажите пожалуйста, не планируете ли снять видео на тему вебсокетов?
Здравствуйте.
Про вебсокеты пока не планирую. Почти не имел с ним дела в реальной практике.
@@mishanep , понял. не сочтите за наглость, но может снимете видео про Firebase авторизацию с помощью гугла, или соцсетей? Думаю, многим будет эта тема интересна
@@MrMomomoy Так уже Михаил снимал такое видео)
Михаил, прекрасное видео
Но у меня вопрос как можно добавить к тулкиту Redux-Axios-Middleware сколько смотрел документацию не нашел этого, просто это было бы очень полезно если хочешь Interceptor к запросам сделать
А что там сложного? Создаешь отдельно service с конфигом interceptor-а для axios, вместо fetch-а юзаешь свой service в slice.
@@---Maksim--- Хмм... Спасибо, надо попробовать👍🏻
Михаил, спасибо
подскажите а как все это будет в случае если список подгружается через апи? у меня получается что функция начинает применяться раньше чем происходит асинхронный thunk?
Приветствую, Константин.
Reselect ничего не знает про санки. Если значение в сторе изменилось, то оно обновится и в UI. Возможно вы меняете значение в момент запроса, а потом повторно - уже при получении данных.
@@mishanep я понимаю, что он не знает. Просто он начинает выполняться до того как данные успевают поступить в стор. Что-то не с работой с промисом. По этому интересно было бы посмотреть на ваш урок
@@kosechok1 селекторы запускаются при каждом диспатче в стор, если я правильно понял вопрос (useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched). Санки, созданные через createAsyncThunk, диспатчат .pending/.fulfilled/.rejected
вот вообще непонятно в какой момент что сделано что стало совсем не так. ибо альтернативес было и перерендеривалось, а потом убрали и оно стало все хорошо. а на саму суть ушло пара секунд.
спасибо . Как называется плагин который выделяет блоки кода у тебя?
Приветствую.
Не совсем понимаю о каком конкретно выделении идет речь.
@@mishanep когда блок выбираешь, то рисуется линия влево и вниз, выделяя таким образом его
Так а причем тема к активному фильтру?
Rerender не должен бить.
При отправке действия useSelector() выполняется эталонное сравнение предыдущего значения результата селектора и текущего значения результата.
Если они разные, компонент будет вынужден выполнить повторный рендеринг.
+
useSelector проверяет ссылки и они у вас каждый раз новые, кто-нибудь. разбирался как это работает внутри?
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.
Там есть вариант сравнения по дефолту, но при желании можно собственный алгоритм предложить.
плохо что без тайпскрипта
я думаю еще стоило упомянуть что createSelector нельзя использовать в самих редьюсерах
спасибо