83 - React JS - подключаем reselect (reselect часть 3)

it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
Ну что, друзья, какие проблемы у нас мы выяснили в предыдущих выпусках...
И нам нужно решение этой проблемы. Встречаем - библиотека RESELECT.
По-прежнему простые селекторы мы создаём руками. А вот более сложные селекторы, которые мы не хотим перезапускать, результат работы которых мы хотим как бы "запомнить", чтобы не делать отработку логики по-новой, так как не изменились данные, которые могли бы повлиять (зависимости) на иной результат, мы будем создавать с помощью функции createSelector
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#reselect #селекторы #reactJS

[@user-ql8sc5kz8d]

Поздравляю, народ, кто сюда дошел. Вы в числе 12% из тех, кто начинал с просмотра 2 видоса) Упрямые и целеустремленные) Спасибо Димычу)! React, reselect, селектор

[@maksimplysheuski2854]

Поздравляю. Привет всем самураям из 2023. Сложное время, но летим.

[@crypto4elik]

@@maksimplysheuski2854 о привет, ты тоже щас проходишь? гоу в чат где щас все кто проходит путь самурая

[@maksimka_pp8454]

@@maksimplysheuski2854 привет привет самурай) удачи всем на пути , бомбим дальше и не сдаёмся

[@user-et8qw8nu2m]

Привет САМУРАИ )), 12% ???, да вроде здесь просмотров тоже не мало, правда не помню сколько их было в самом начале.., а отсееваться будут по любому, ведь не все такие задроты как МЫ )) !!! React, reselect, селектор КРУТЕЙШАЯ ШТУКА !!!

[@ivansamoiliuk5451]

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

[@ITKAMASUTRA]

Спасибо, Ваня, за добрые слова!

[@user-bx7ly2th3b]

Конечно, это надо еще суметь сделать, но помимо прочего, почему другие люди объясняют эти вещи сложно? Потому что невозможно объяснить просто то, чего ты сам толком не вкуриваешь. А им в свою очередь объясняли такие же долбаебы, которые боятся говорить простым языком (потому что им понт дороже всего) и хуярят все по википедии (или learnjavascript). В итоге у них в башке куча крутых терминов, они типа жестко шарят, но вот по-простому все это объяснить не могут, потому что за всей этой херней - они саму суть ухватить не могут и чем мне нравится Димыч - он не ссыт говорить по-простому, и даже отступать от википедии (за что его хейтят долбоебы, которые сами так делать не умеют)

[@user-wj6ue7nt5g]

Поддерживаю полностью!!!

[@fargutvest]

Библиотека reselect, круто, спасибо! React Redux функция createSelector создает реселектор, она принимает в качестве зависимостей простые селекты из стейта (селекты без сложных вычислений), при первом вызове реселекта значения зависимостей кешируются внутри реселекта, а при следующих вызовах дергаются простые селекторы зависимости и их значения сравниваются с кешироваными! Если изменений по сравнению с кешем нет, то сразу возвращается кеншированный результат без запуска дорогого селектора, если же что-то из зависимостей изменилось в стейте по сравнению с кешем то тогда уже вызывается селектор с дорогими вычислениями!

[@blackspace5747]

чаще всего я обходил стороной твои видосы, потому что они очень большие, и у тебя поток мыслей дико объемный)) но когда посмотрел эти три видоса про реселект, я понял что оно того стоит, потому что ты очень много крутой инфы даешь, это очень круто, не многие могут так донести!) спасибо большое за твой труд, лайк, подписка, все дела)

[@user-pn2er2sn2e]

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

[@alexvoid8717]

@@user-pn2er2sn2e скорость воспроизведения регулируется в обе стороны

[@user-pn2er2sn2e]

@@alexvoid8717 Ничего себе!)

[@mokkamokka4097]

Просто лютый преподаватель!) Если бы все так объясняли.. Спасибо!

[@user-sp9uc4kf8n]

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

[@genapolyakov]

В новой версии Redux уже использутся другой реселест createSelectorHook. Импорт такой: import { createSelectorHook } from "react-redux". Установка его не требуется, он уже встроен. Про это написано в Redux, но синтаксис там старый createSelector. Поменялось только название и импорт, а остальное тоже. Возможно так какие-то аргументы другие будут, но пока все без изменений. Это как с withRouter.

[@shevafootbal]

createSelectorHook работает иначе, не вводи людей в заблуждение. Увидел твой комментарий и подумал что в 2023м так используют. В итоге очень долго сидел тупил пока не сделал импорт как в видео

[@slikeiv4477]

Музон огонь, надо записать альбом и назвать JS forever

[@user-wj6ue7nt5g]

Супер, супер, супер. Мне кажется или как то проще стала восприниматься информация чем вначале курса))) Финиш близко! Поздравляю всех тех, кто дошел до этого выпуска!! Летим, самураи!!!

[@slavapush]

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

[@viktorshatalov1920]

димыч!! Ты так вдохновляеш - что от меня донат сразу с первых денег!!!класс!!!!!Самый лучший курс!!!(я это уже 85 раз написал))))))

[@ITKAMASUTRA]

Спасибо, Виктор, за каждый раз !!!

[@bilionievgen9004]

донат тоже будет за каждые 85 раз?)

[@marynakosiv3750]

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

[@theWorldIsMultivariate]

С опытом программирования в 1.5 года, несложно понять эту тему. Спасибо за урок Reselect!!

[@seriogaromanchykov9451]

Объясняет сложные вещи на пальцах. Это дар! 2023

[@zubziro5566]

Супер мотивация в конце.Спасибo -_-)!!

[@denkodatskyi3381]

React JS - подключаем reselect (reselect часть 3) Лучшие уроки по React JS & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!! Just simply about information technology =)

[@n0escape]

Такс, посмотрел урок в ознакомительном виде. Пишу отчет по увиденному. В данном уроке решилась проблема лишнего вызова селекторов, путем вызова метода createSelector из библиотеки reselect. Синтаксис использования reselect: Устанавливаем: npm install reselect Импортируем в файл с селекторами: import {createSelector} from 'reselect' Используем при создании селектора: export const getUserReselector = createSelector ( getUsers, (users) => { // логика сложного селектора } ) Чтобы создать реселектор на основе данных из state, нужно использовать примитивный селектор который получит вернет в через return нужные данные. В примере выше, используется примитивный селектор: export const getUsers = (state) => { return state.contentBar.usersPage.users } Созданный селектор импортируем и используем в mapStateToProps, как обычный селектор import { ..., getUserReselector } from './../../redux/usersSelectors' ... let mapStateToProps = (state) => ({ users: getStateUsersReselect(state), ... }) Принцип работы селектора на основе reselect: - Данный селектор вызовется только тогда, когда произойдет изменение в state в дочернем селекторе. По примеру выше- если будет изменение в массиве users в state в селекторе getUsers,- то произойдет перерасчет логики из getUserReselector. - Селектор на основе reselect выполняет некоторое кеширование результата, тоесть, если изменений в отслеживаемом элементе state не происходит - возвращается предыдущий результат вызова данного селектора - При использовании debugger в селекторе на основе reselect - остановка происходит дважды. Первый раз - селектор вызовется без приходящих значений. Второй - произойдет вызов дочерних селекторов с передачей нужных данных. - Дочерние селекторы на данных которых основан реселектор - могут быть также созданы на основе реселектора или на основе нескольких селекторов, тогда синтаксис чуток меняется: export const getUserReselector = createSelector ( getUsers, someSelector (users, someSelectorResult) => { // логика сложного селектора } ) ,где someSelector может быть как примитивным селектором, так и на основе библиотеки reselect someSelectorResult - это результат выполнения селектора someSelector (return 'reult') колличество someSelector`ов безгранично и колличество someSelectorResult прямопропорционально колличеству someSelector наименование дочерних someSelector можно обернуть в массив и также передавать их через запятую

[@user-pq8ci3mx6g]

Вы очень доходчиво объясняете суть проблемы, при этом начали не с самой легкой библиотеки redux, которая тянет за собой кучу других библиотек... Поймал себя на мысли, какого будет новичку когда он взглянет в сторону, к примеру, mobx. Для него mobx покажется детским садом) Как вы и говорили в прошлых выпусках: "главное понять проблему...", и какую бы вы библиотеку не начали изучать вы столкнётесь с теме-же проблемами но с другим подходом к их решению. Не перестаю удивляться как вы удачно подобрали последовательность в этом курсе начав c самого сложного, а именно сперва изучили глобальный стейт на redux, а только затем локальный. И таких моментов много. Супер курс, удачи Вам во всех начинаниях!

[@user-gt5ux9cx6p]

Уже устроился на работу?

[@iceaye5730]

Спасибо, очень доступное объяснение всей темы reselect!

[@RedSkyWan]

Продолжаю изучение - 21-ый день - 83/100 Димыч, спасибо за труд!

[@RedSkyWan]

@@Dpon0 92/100. Немного отвлёкся на основную работу. К НГ закончу полностью Готовлю список интересных мне компаний

[@vladimirww5152]

Сколько всего надобно знать для Реакта, и Редирект, и Хуки, и много всего!)

[@romanpomin1967]

Использование функции createSelectors из библиотеки reselect предотвращает множественные вызовы функции render, которая является ресурсозатратной, а также кеширует результаты сложных математических вычислений. Проводить отладку работы селектора также становится проще.

[@YuriyOleynikov]

В понедельник посмотрю) спасибо

[@DubinArtur]

Я смотрю этот курс после того, как выучил JS, и мне эта тема кажется простой

[@user-wv8wj4wc4c]

Магическая логическая магия. А главное ведь понятно о чём он говорит, Димыч ты талант! Знаю по собственному опыту, что объяснять массе людей то чего они не знают или не понимают, это не простой, объёмный и вдумчивый процесс, очень энергозатратный и времязатратный процесс. Димыч, тебе +100500 к карме, твоей семье терпения, твоим проектам успеха!!!

[@itweb7157]

решил попробовать фичу с несколькими входящими селекторами, как показал Дима в видео (23:45), но именно в таком исполнении будет ошибка, потому, что селектор getIsFetching объявлен ниже по коду и его нужно просто переместить выше ИЛИ же писать сложные селекторы в самом низу если кто-то уже писал об этом - сорян, я прочитал первые ~50 из 190 комментов и не нашел Дима, спасибо за твой труд! #React #JS #reselect

[@Volodymyr.S]

если создавать селекторы через function, то можно писать везде и ниже, и выше, как мне кажется

[@MikhailKuklenkov]

Жирный лайк за труд, Дима. Шикарный видос)

[@daeriofrixell199]

очередное крутое объяснение темы селекторов и библы реселект. Прочитал 7 статей, но Димич как всегда пошинковал всех своей катаной. С учетом, что видосу 3 года и можно было бы научиться объяснять лучше, но увы и ах ахахах Димыч красава, как всегда! Лайк, подписка, (правда уже +-год назад подписался)

[@user-yx7in9nl1d]

Крутые уроки!!! Дойду до 100 урока, и буду всё заново проходить, потому что инфы много, много чего в головешку не поместилось

[@user-hg2sy3wi6t]

npm выкатывал ошибки при попытке инстала библы реселект, решил так же как с библой формса, добавил к команде --force, пока что ещё нуп чтоб разобраться как оно сейчас будет правильно

[@genapolyakov]

у меня тоже ошибки вылитают. Видно из-за формса. Потому что в ошибках указывается опять redux-form npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.4.2 || ^17.0.0" from redux-form@8.3.8 npm ERR! node_modules/redux-form npm ERR! redux-form@"^8.3.8" from the root project и указывает, что нужно снова перезапустить или уже использовать форс. Нужно как с формами дописать в конце --force npm ERR! this command with --force, or --legacy-peer-deps

[@genapolyakov]

в инструкции написано no further installation needed, возможно и поэтому не ставится. Реселескт уже включен в стандартный пакет. Но почему-то не вылетает createSelector, а есть только createSelectorHook

[@viktorshcheplyagin9576]

Просто на одном дыхании! Понимание до мелочей (чтоб объяснять последовательно и просто) + Софт скилы (чтоб объяснять живо и интересно) = Димыч🧠

[@is_eliseeva]

спасибо за урок, Дмитрий. доступные для понимания объяснения. я на повтор. 2023-06-06 летим к сотому выпуску.

[@Vllad_Ko]

легко и непринужденно тема selector и функция createSelector из библиотеки Reselect вошла в моё сознание, спасибо!

[@amaxe12345]

Спасибо за урок! React JS - подключаем reselect #reselect #селекторы #reactJS

[@Vnikny]

Отличное видео. Понял с первого раза-). Спасибо. Лучший курс по Реакту 2020.

[@user-fi2gz4vr2l]

После 80 видоса, селекторы зачет, очень понятно и доступно объяснил)))

[@dimitriitkach7697]

spasibo za urok - 83 - React JS - подключаем reselect (reselect часть 3)

[@eugene-dmitrievich]

Спасибо большое за урок!!! Было очень полезно. Reselect стал понятнее

[@__online7250]

🤩React JS - подключаем reselect (reselect часть 3)

[@dmitrylebedev2691]

Когда Димыч готовится к уроку, то урок получается 10/10. Всё понятно)

[@sergsergey4251]

Спасибо! React JS - подключаем reselect. Подключил библиотеку reselect. Бомбим дальше ©

[@__online7250]

Крутая тема #reselect #createSelector ! Интересная и полезная!

[@maxim.saharov]

[@ollegat]

Реселект прикольная штука

[@user-tp4fn2dl9w]

Спасибо за урок! В 1 раз посмотрела, стало страшно. Посмотрела во 2 раз, стало понятно 🤓 лучший учитель!!

[@vladpobidash]

Спасибо, я понял как это работает! Шикарная концепция - reselect! Спасибо, Димыч, с каждым уроком React становится все интересней и интересней...

[@mikhailpetrunenko6472]

Как всегда объяснение на высшем уровне,огромное спасибо за твой труд!!! UPD. Мой лайк стал тысячным)))

[@bitcoin-]

83 - React JS - подключаем reselect (reselect часть 3)

[@Sentensos]

Хорошо объяснил и в целом концепция ясна. Единственный непонятный момент, это ситуации в которых стоит применять реселекты для манипуляции с данными. Но я думаю это будет пояснено дальше.

[@ITKAMASUTRA]

Угу!!! Когда коснёмся реальных кейсов!

[@user-zp6bc1wm1w]

Библиотека reselect. Будем знать, возможно - использовать. Спасибо. Летим дальше.

[@black_light]

Второй день ломал голову над ошибками в консоли на счет этих лишних перерисовок. А тут бац, Димыч всё порешал) Респект! Upd: ошибка ушла, а перерисовки нет) гг

[@user-pv5is5pz4j]

Спасибо за урок! Reselect классная штука. Параллельно с социальной сетью для закрепления полученных знаний делаю to do list, и там они мне понадобились для реализации двойной фильтрации. У меня два фильтра. Один фильтрует по дням и выводит на страницу (сегодня, завтра, остальные задачи), а уже внутри этих списков задач есть фильтры(все задачи, активные и выполненные). Без reselect никак не получалось, чтобы они работали в тандеме)

[@user-fs1ux7dy6r]

А можешь показать свою to-do шку?

[@smartapesofficial6855]

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

[@vadikpanchuk4978]

Прстыми словами о гениальных вещах. Так держать! RESELECT !!!

[@jonecramer3870]

Но под конец я понял что происходит, зачем как и куда. Димыч красавчик благодарю за труд!

[@marina-ej4qd9kc1wh]

Видео супер. Reselect redux-react

[@akionka]

Димыч, проставь точки с запятыми где WebStorm просит, пожалуйста!!!)

[@Romul3003]

можно просто в WebStorm отключить просилку, и не надо будет ставить точки с запятыми))) или (!!!) настроить prettier и он сам будет ставить точки с запятыми

[@uzver3787]

Connect Reselect library for mapStateToProps. infinitely rerender? Use reselect. Architectural way of thinking. Like.The best lesson. Похоже дальше уже будет проще.

[@denysm5599]

reselect библиотека к React. Интересный подход. Спасибо за урок!

[@user-lf6bl7jf3p]

Используются ли все эти методы сейчас? или по другому пишут сейчас

[@SergeSchekhovtsov]

Великолепный курс. Вроде всё понял, круто, летим!

[@tanyatritelnitskaya1911]

Дима, спасибо за предельно ясно объяснение!!! Reselect - это сила!

[@user-eb5yw9ui6o]

Дима,большое спасибо! С третьего раза, но все понял!))Идем дальше!

[@olegthesheriff]

Летим к победе вместе с Димычем с помощью него же самого))). Спасибо что ты есть!

[@johnmj750]

Спасибо, Димыч! Ты мне приснился кстати!) Сказал, что все будет хорошо!) Я тебе донат с первой зп пообещал!)

[@user-rg8wz2rt9e]

hook интересно)

[@ivanmiarkulau8320]

великолепное объяснение работы библиотеки reselect!) Спасибо!)

[@Ddddddddyu]

19 дек. 2021. я на 83 видео уроке. Вернусь сюда, когда устроюсь на работу, чтобы понастольгировать

[@_serge_]

как дела с трудоустройством?

[@Ddddddddyu]

@@_serge_ ещё нет. Первый и последний проваленный собес был месяц назад. Сейчас уже сил не хватает дальше всё это изучать. hr'ы отказывают поголовно

[@MsThe13th]

@@Ddddddddyu а сейчас как? На чем именно валят HRы?

[@Ddddddddyu]

@@MsThe13th hr'ы скорее всего ищут людей, у кого pre-middle уровень, у кого есть в резюме webpack, typescript, и реальный опыт в реальных компаниях. Не знаю почему, но сейчас порог входа стал очень сложным

[@MsThe13th]

@@Ddddddddyu печально ( так вдохновляют словами Димыча, что на рынке нехватка кадров. Походу это уже не так. Ну будем пытаться… удачи!

[@user-yx7in9nl1d]

Второй раз намного понятнее))

[@milter2539]

Урок 83. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:

[@AI_about_crypto]

Всё супер понятно. Ждём Хуки, там будет интересно 2022 )

[@AI_about_crypto]

[@maxim.saharov]

[@reactguy]

Всем привет! Если у кого-то, после установки библиотеки reselect крашнулось приложение с ошибкой Module not found: Can't resolve 'redux-form'.... Переустановите библиотеку react-redux через консоль командой yarn add react-redux Дима, как всегда, спасибо за шикарное видео, бомбим react дальше!

[@texasviking7732]

Димыч крутецкая круть с перерывами небольшими но двигаюсь вперед

[@user-dq5lt2rx3y]

Lesson 83 Done!

[@maksym_shkaf]

React reselect. Спасибо! Прикольная прога для рисования)

[@jses8560]

reselect прошли, летим дальше! Спасибо Димычу.

[@semial]

Спасибо за урок, Димыч!!! Reserlect надо пересматривать однозначно

[@user-kr9gm6pi6w]

Хорошо мотивируешь Димыч, спасибо тебе. Уволился с прежней работы чтобы целиком податься в обучение, щас сижу обучаюсь по твоему курсу. Посмотрим, что из этого выйдет)

[@hennadiipetrov1967]

Reselect сложно, но интересно), Благодарю Димыч)

[@jonecramer3870]

И стихи под гитару классные

[@user-km8kb3xj1p]

30/06/2022 - Летим дальше! Reselect, react, redux

[@TatianaKlimenko]

Очень понятное объяснение reselect! Спасибо!

[@miguelgrushetckii4839]

Все понятно! Спасибо Димыч, донес инфу в лучшем виде

[@derrylsshowhh3249]

В который раз говорю что Димыч красава!Иногда какё-то тильт ловишь,но Димыч и ребята,которые сидят в комментах заряжают и мотивируют!

[@lybava5745]

спасибо дядя Дима... теперь понял для чего все это нкжно... Это подготовка пропсов для чистых функций и опять вся логика вынесена в сторону. Ведь все можно было сделать в контейнерной компоненте, но так РЕАЛЬНО лучше и понятней и рефакторинг в дальнейшем делать будет гораздо проще

[@ctumyji9737]

Димыч как всегда на высоте! Спасибо за урок - погнал дальше! React JS - лучший курс!

[@Al4ii]

Увидел Димыча - поставил лайк!!

[@user-in5qb3ml4l]

Летим !

[@alexandrryzhenkov6917]

ты такой эмоциональный (до этого не знал как пишется это слово #smile) , и чтобы не забыть поставить лайк, ставлю его в начале ролика.. т.к. знаю, что материал у тебя достойный. Спасибо!!

[@vitaliidrapaliuk5652]

ещё раз спасибо)

[@STRIPPEDSTAR]

Спасибо Димыч, крутая библиотечка, performance наше все)

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@user-cb2bw2fx4j]

Select, reselect, redux, react, js - очень легко зашла данная тема, даже немного удивительно)))

[@qexly512]

Тема понятна! С первого раза! Спасибо!

[@ZzoOtiks]

Спасибо за курс!! Фюх Фюх Фюх #react #reactJS #js #javascript #reselect #kavagangaepta :))))))))))))))

[@Ddddddddyu]

Мне кажется, что этот видео урок был сложнее санок, в плане объяснения

[@otto-vector]

Сегодня смотрел видео про Батчинг (batching) в React, который вводят в 18-ой версии. тут очень близко к этому

[@marsonleonardovich4036]

Спасибо! Всё супер отлично объяснил про reselect! Как всегда respect)

[@andreyshevchenko3988]

Димыч красавчик! супер курс!!!

[@user-pc9bl7uf1l]

Огонь!

[@andreityryshkin3784]

Лайка от мну))) если в друг уcтал от React JS то можно отдохнуть на видео Уроки JavaScript с нуля (ну ваще с нуля) (от Димыча)