Reselect для оптимизации Redux стора
Вставка
- Опубліковано 8 вер 2024
- Когда необходимо преобразовать данные перед выборкой или собрать информацию с нескольких ответвлений стора библиотека Reselect одновременно упрощает задачу и делает ее более оптимальной. Redux Toolkit в свою очередь содержит Reselect в качестве дочерней зависимости.
Код из видео github.com/mic...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
За Redux Toolkit всегда лайк! Забавно, что именно сегодня на кодревью получил замечание, что надо переписать на createSelector свой код)) Так что, можно сказать, что это не просто теория, а вполне себе рабочая задача)
Михаил, спасибо большое за ваши видео. Было бы интересно послушать про продвинутый rtk query, отлавливание ошибок и с чем ещё можно столкнуться в реальной работе.
Тоже интересно
Да про ошибки было бы круто, тоже завис на этой теме!!!!
Михаил спасибо за видео. Полезный контент redux reselect!
Как я Вам благодарен Михаил!!!
Михаил очень понравился Ваш курс по Redux, ждем курс по TS)
Красава как всегда!
Михаил, спасибо вам!
Вы стали уже как наставник мне! Потому что живя в сельской местности, нет особой возможности покупать платные курсы. А вы очень хорошо объясняете и помогаете тем самым незаменимо!
Как устроюсь на джуна, обязательно куплю у вас курсы на Udemy в знак благодарности!
Устроился?
@@localhost666 Уже да, но ищу дальше
@@vladimirplyukhin5234 обещание сдержал?
@@localhost666 ахахаха мэни, ты что здесь как интернет-совесть?
Но да, есть там неплохой курс по Redux.
@@vladimirplyukhin5234 неблагодарный
Михаил, спасибо большое! благодаря вашего контента токо понял весь прелесть тулкита и слайсов
Отличный контент! Автору спасибо!
Спасибо, было полезно! (Reselect)
Михаил, снимите, пожалуйста, видео про обработку ошибок - как лучше отображать пользователю, что некий запрос не сработал - может какой-нибудь попап в углу экрана для общих случаев, и отдельно для частных. + Очень хочется видео про мульти запросы на API (наверное есть возможность через редакс или по старинке циклом по массиву)
для отображений ошибок юзеру есть либа react-toastify. Про мульти запросы посмотри в сторону Promise.all и Promise.race
Только подумал, а че я ресилект забыл в своем проекте и видос выскочил, значит мысль верна 😂😂
Большое спасибо =) Очень хорошо объясняете
Классное объяснение. Спасибо!
Спасибо, Михаил 😌
Спасибо отличный видео
Большое спасибо! отличное видео
Спасибо!
спасибо
Михаил, спасибо за отличный контент!
Есть пара вопросов, буду благодарен за ответ:
1. Насколько сейчас распространена практика использования Redux Toolkit в коммерческих проектах по сравнению с обычным Redux?
2. Насколько актуальными остаются саги в связи с популярностью Redux Toolkit, в котором Thunk идет из коробки?
С сагами мне в принципе не доводилось работать, поэтому сложно ответить на этот вопрос. Они решают много задач и уже по проекту надо смотреть актуальность использование этого дополнения к редаксу.
Касаемо тулкита, то он всё чаще и чаще встречается в свежих проектах. Легаси, конечно, не спешит переезжать на современные рельсы, но тулкит намного актуальнее. С ним проще работать и он очевиднее типизируется.
молодець!
TOP
красава
Михаил, спасибо за очередное отличное видео. Скажите пожалуйста, не планируете ли снять видео на тему вебсокетов?
Здравствуйте.
Про вебсокеты пока не планирую. Почти не имел с ним дела в реальной практике.
@@mishanep , понял. не сочтите за наглость, но может снимете видео про Firebase авторизацию с помощью гугла, или соцсетей? Думаю, многим будет эта тема интересна
@@MrMomomoy Так уже Михаил снимал такое видео)
Для меня после прочтения документации редакса осталась не вполне понятной тема размера кэша. В документации редакса рекомендуют передавать 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?
Так а причем тема к активному фильтру?
Rerender не должен бить.
При отправке действия useSelector() выполняется эталонное сравнение предыдущего значения результата селектора и текущего значения результата.
Если они разные, компонент будет вынужден выполнить повторный рендеринг.
Перенёс селекторы)
Михаил, прекрасное видео
Но у меня вопрос как можно добавить к тулкиту Redux-Axios-Middleware сколько смотрел документацию не нашел этого, просто это было бы очень полезно если хочешь Interceptor к запросам сделать
А что там сложного? Создаешь отдельно service с конфигом interceptor-а для axios, вместо fetch-а юзаешь свой service в slice.
@@---Maksim--- Хмм... Спасибо, надо попробовать👍🏻
вот вообще непонятно в какой момент что сделано что стало совсем не так. ибо альтернативес было и перерендеривалось, а потом убрали и оно стало все хорошо. а на саму суть ушло пара секунд.
Кто нибудь знает как мемоизировать отдельное значение из Redux? Все функции со стейтом я с помощью reselect реализовал, но отдельные значения все равно вызывают ререндер?
Михаил, спасибо
подскажите а как все это будет в случае если список подгружается через апи? у меня получается что функция начинает применяться раньше чем происходит асинхронный 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 когда блок выбираешь, то рисуется линия влево и вниз, выделяя таким образом его
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 нельзя использовать в самих редьюсерах
Спасибо, было полезно!
Спасибо )
спасибо