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

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

[@user-vm2db5cq1g]

Отличный контент! Автору спасибо!

[@TheMaxfri]

Михаил, спасибо большое за ваши видео. Было бы интересно послушать про продвинутый rtk query, отлавливание ошибок и с чем ещё можно столкнуться в реальной работе.

[@artman9592]

Тоже интересно

[@andrewsam224]

Да про ошибки было бы круто, тоже завис на этой теме!!!!

[@user-px9pp4nz5m]

Михаил очень понравился Ваш курс по Redux, ждем курс по TS)

[@olegsh2888]

За Redux Toolkit всегда лайк! Забавно, что именно сегодня на кодревью получил замечание, что надо переписать на createSelector свой код)) Так что, можно сказать, что это не просто теория, а вполне себе рабочая задача)

[@bagga_lev]

Большое спасибо =) Очень хорошо объясняете

[@KGMelis]

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

[@user-qj6ns8ot3l]

Классное объяснение. Спасибо!

[@andrewsam224]

Как я Вам благодарен Михаил!!!

[@TRIZ-Bogatyregold]

Михаил спасибо за видео. Полезный контент redux reselect!

[@user-rz1kq8oz4f]

Большое спасибо! отличное видео

[@fpsska2028]

Спасибо, Михаил 😌

[@disconnect355]

Спасибо, было полезно!

[@nizom333]

Спасибо отличный видео

[@mikhail_shokun]

Красава как всегда!

[@user-kn3ut1sh2o]

Спасибо, было полезно! (Reselect)

[@dirty_arkady]

Спасибо!

[@yaroslavom-js6983]

Спасибо )

[@vladimirplyukhin5234]

Михаил, спасибо вам! Вы стали уже как наставник мне! Потому что живя в сельской местности, нет особой возможности покупать платные курсы. А вы очень хорошо объясняете и помогаете тем самым незаменимо! Как устроюсь на джуна, обязательно куплю у вас курсы на Udemy в знак благодарности!

[@localhost666]

Устроился?

[@vladimirplyukhin5234]

@@localhost666 Уже да, но ищу дальше

[@localhost666]

@@vladimirplyukhin5234 обещание сдержал?

[@vladimirplyukhin5234]

@@localhost666 ахахаха мэни, ты что здесь как интернет-совесть? Но да, есть там неплохой курс по Redux.

[@localhost666]

@@vladimirplyukhin5234 неблагодарный

[@artman9592]

спасибо

[@alexleshenko]

Только подумал, а че я ресилект забыл в своем проекте и видос выскочил, значит мысль верна 😂😂

[@kruboy1605]

молодець!

[@romeshfarhod-zoda8892]

красава

[@user-fv4xc4qp2h]

Михаил, снимите, пожалуйста, видео про обработку ошибок - как лучше отображать пользователю, что некий запрос не сработал - может какой-нибудь попап в углу экрана для общих случаев, и отдельно для частных. + Очень хочется видео про мульти запросы на API (наверное есть возможность через редакс или по старинке циклом по массиву)

[@dispeltr1183]

для отображений ошибок юзеру есть либа react-toastify. Про мульти запросы посмотри в сторону Promise.all и Promise.race

[@MrMomomoy]

Михаил, спасибо за очередное отличное видео. Скажите пожалуйста, не планируете ли снять видео на тему вебсокетов?

[@mishanep]

Здравствуйте. Про вебсокеты пока не планирую. Почти не имел с ним дела в реальной практике.

[@MrMomomoy]

@@mishanep , понял. не сочтите за наглость, но может снимете видео про Firebase авторизацию с помощью гугла, или соцсетей? Думаю, многим будет эта тема интересна

[@user-nv6fm4pl4w]

@@MrMomomoy Так уже Михаил снимал такое видео)

[@nizom333]

TOP

[@johndoe034]

Михаил, спасибо за отличный контент! Есть пара вопросов, буду благодарен за ответ: 1. Насколько сейчас распространена практика использования Redux Toolkit в коммерческих проектах по сравнению с обычным Redux? 2. Насколько актуальными остаются саги в связи с популярностью Redux Toolkit, в котором Thunk идет из коробки?

[@mishanep]

С сагами мне в принципе не доводилось работать, поэтому сложно ответить на этот вопрос. Они решают много задач и уже по проекту надо смотреть актуальность использование этого дополнения к редаксу. Касаемо тулкита, то он всё чаще и чаще встречается в свежих проектах. Легаси, конечно, не спешит переезжать на современные рельсы, но тулкит намного актуальнее. С ним проще работать и он очевиднее типизируется.

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

Михаил, прекрасное видео Но у меня вопрос как можно добавить к тулкиту Redux-Axios-Middleware сколько смотрел документацию не нашел этого, просто это было бы очень полезно если хочешь Interceptor к запросам сделать

[@---Maksim---]

А что там сложного? Создаешь отдельно service с конфигом interceptor-а для axios, вместо fetch-а юзаешь свой service в slice.

[@maksymkyryliuk492]

@@---Maksim--- Хмм... Спасибо, надо попробовать👍🏻

[@user-fv4xc4qp2h]

Перенёс селекторы)

[@user-wr4br7sr9q]

Кто нибудь знает как мемоизировать отдельное значение из Redux? Все функции со стейтом я с помощью reselect реализовал, но отдельные значения все равно вызывают ререндер?

[@kosechok1]

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

[@mishanep]

Приветствую, Константин. Reselect ничего не знает про санки. Если значение в сторе изменилось, то оно обновится и в UI. Возможно вы меняете значение в момент запроса, а потом повторно - уже при получении данных.

[@kosechok1]

@@mishanep я понимаю, что он не знает. Просто он начинает выполняться до того как данные успевают поступить в стор. Что-то не с работой с промисом. По этому интересно было бы посмотреть на ваш урок

[@alexvoid8717]

@@kosechok1 селекторы запускаются при каждом диспатче в стор, если я правильно понял вопрос (useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched). Санки, созданные через createAsyncThunk, диспатчат .pending/.fulfilled/.rejected

[@ssurrokk]

спасибо . Как называется плагин который выделяет блоки кода у тебя?

[@mishanep]

Приветствую. Не совсем понимаю о каком конкретно выделении идет речь.

[@ssurrokk]

@@mishanep когда блок выбираешь, то рисуется линия влево и вниз, выделяя таким образом его

[@romanmed9035]

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

[@vitya.obolonsky]

Так а причем тема к активному фильтру? Rerender не должен бить. При отправке действия useSelector() выполняется эталонное сравнение предыдущего значения результата селектора и текущего значения результата. Если они разные, компонент будет вынужден выполнить повторный рендеринг.

[@iGotton]

+

[@dmitry7464]

useSelector проверяет ссылки и они у вас каждый раз новые, кто-нибудь. разбирался как это работает внутри?

[@dmitry7464]

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]

Там есть вариант сравнения по дефолту, но при желании можно собственный алгоритм предложить.

[@user-vk1id6md6o]

плохо что без тайпскрипта

[@lesters]

я думаю еще стоило упомянуть что createSelector нельзя использовать в самих редьюсерах

[@morph2049]

спасибо