Все ли вы знаете о useSelector?
Вставка
- Опубліковано 11 лип 2024
- useSelector - это хук, который используется буквально каждый день. Кажется что мы должны знать о нем уже абсолютно все, но так ли это на самом деле?
Исходники useSelector - github.com/reduxjs/react-redu...
Исходники useSyncExternalStoreWithSelector - github.com/facebook/react/blo...
Поддержать Айти Синяка можно здесь:
UA-cam: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:37 Исходники useSelector
02:20 Исходники useSyncExternalStoreWithSelector
05:53 Причина рендера
06:55 Подведем итоги
08:00 Подписывайтесь!
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
________________
Канал о Фронтенде, который хочется порекомендовать (telegram):
t.me/frontendnoteschannel
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Круто! Спасибо за объяснение useSelector!
Спасибо! Очень познавательно!
Как всегда контент на высоте) Клево было бы послушать про reselect, а в частности про функцию createSelector из RTK. Спасибо!)
Обязательно будет ролик про reselect!)
Годный разбор, спасибо. Теперь я знаю как работает useSelector
Спасибо за контент Александр!
Большое спасибо. Классное видео
Отличный контент, не останавливайтесь)
Нет планов останавливаться, только вперед!)
Отличное и понятное объяснение. Подписка, лайк и жду много нового и полезного
Спасибо за отличный видос!
Спасибо! 💪
Спасибо большое!
Крутяк!!! Сразу подписка после просмотра.
Добро пожаловать на канал!
Отличный разбор и что самое главное на основе этого разбора разработчики могут увидеть что «лезть в исходники» это очень полезно ;)
Спасибо :)
это одна из идей моих видео, помочь разработчикам не бояться исходников
Большое спасибо, максимально полезный контент!
Спасибо!) Если поделитесь с коллегами, будем очень признательны!)
Оч. круто.
спасибо!
Спасибо за ваш канал)
Интересный видос 😊
Крутяк, спасибо!
Еще раз убедился в важности того, чтобы следить за тем когда значения сравниваются по ссылке в react. Спасибо за выпуск
Спасибо! Теперь я знаю как работает useSelector
Спасибо!
Очень интересно, ждем reselect :)
очень даже очень, спасибо
Спасибо за науку.
Спасибо за просмотр.
useSelector с Reselect-ом отлично дополняет друг друга
Офигенное видео!!!
Не забудьте поделиться им с вашими коллегами, мы будем очень признательны!)
Cool! Nice life hack
Не знал , теперь знаю)))
Теперь я знаю как работает useSelector
Теперь я знаю как работает useSelector )))
в целом было полезно я думаю, я даже пока не знаю для чего нужен этот useSelector правда
Тот момент когда не польщуешься редаксом(иногда лучше дрилить и композиции делать чем редакс), но видео отличное :)
Спасибо) А какой стек у вас на проекте?)
Лойс
Спасибо за объяснение (⌒‿⌒)
Спасибо! Хоть я и не использую Redux в повседневной разработке, все равно интересно узнавать подобные нюансы.
А какой стек у вас используется?) доберусь и до вашего стека может в будущем)
@@it-sin9k react + rxjs. Без сторонних стейт менеджеров
Есть группа людей, кто очень любит rxjs с реактом использовать, но я к сожалению еще не видел ни одного проекта, как это все работает. Постараюсь еще получить этот опыт как-нибудь :)
@@it-sin9k один раз попробовав rxjs уже не хочется от него отказываться :)
Я не встречал хороших решений, которые позволяют "подружить" rxjs с реактом без редакса. Мы используем собственное решение. Возможно рано или поздно оно станет опенсорсным.
круто) если выложите в open source пишите, я может обзор на него сделаю)
крутой чел этот синяк)
Не могу не согласиться)
Насколько я понял, в видео рассмотрена еще не вышедшая версия react-redux 8.x, потому что в актуальной на данный момент версии 7.2.6 исходники другие))
Это забавная история, как я готовил этот ролик. Сначала я изучал другие исходники useSelector. И когда уже собирался писать сценарий, react-redux накатил изменения) Я начал изучать заново, решил лучше рассказывать о актуальной версии. Закончил готовить ролик, записал аудио. И потом была React conf 20201, где они рассказали про новый АПИ 18-ой версии) короче поторопился я с выпуском темы)
@АйТи Синяк нужен ваш совет) Я обычно делаю "корневую" ф-ю селектор для конкретного редюсера (selectNewsState = (state) => state.news;), далее его использую для других селекторов + createSelector из RTK (selectNewsIsLoading = createSelector(selectNewsState, (state) => state.isLoading). Насколько хорошо или плохо все селекторы создавать, используя createSelector? Я так понимаю под капотом reselect
Про reselect будет отдельное видео, там постараюсь поднять этот вопрос)
Теперь я tochno знаю как работает useSelector
Неплохо было бы записать видео (может оно уже есть и я просто прошел мимо) на тему минусов Редакса. Я не о многословности (оно решается с помощью Redux Toolkit), а о том, что Редакс может создавать излишние связи между разными компонентами в проекте.
Есть мысль такая, если есть более детальные примеры недостатков Redux я был бы рад их тоже добавить в будущее видео :) или пришлите на почту материалы, которые у вас есть) blue.sin9k@gmail.com
Классное видео и много полезного
Я вот только что-то туплю и не пойму 3ий пункт из части итогов
Если мы из селектора не возвращаем новый объект, то что нам по хорошему нужно возвращать ?
Вопрос немного сложно составлен. Суть третьего пункта в том, что всегда нужно возвращать прежнюю ссылку на объект / массив, если хотите избежать неожиданных рендеров. Как именно это работает я рассказывал на примере mapStateToProps. Там логика точно такая же. Посмотрите вот это видео (ua-cam.com/video/bqQI9rFm1ro/v-deo.html)
Здравствуйте, у вас есть успехи в изучении паттерна Репозиторий и применений его в проектах React? Очень хотелось бы услышать ваше мнение об этом и увидеть применение его.
Не первый раз, слышу в комментариях, что многим интересен этот паттерн. Я его не раз уже читал. Но честно говоря я использую немного другой подход. Тоже целый ряд абстракций и тому подобное :) Чтобы об этом паттерне рассказывать, нужно найти людей, которые в продакшене его используют и пообщаться)
а как быть, когда в селектор нужен параметр? я знаю два способа передачи
1) useSelector((state) => mySelector(state, param))
2) useSelector(mySelector(param))
Какой из них лучше практиковать или что вообще посоветуете в данном случае??
Тот же вопрос при использовании createSelector
А у нас в проекте столько полей требуется из стора, что приходится возвращать всегда объект, поэтому второй аргумент почти всегда используем
const {items, activeItem} = useSelector(state => ({items: state.items, activeItem: state.activeItem}), shallowEqual);
делать кучу useSelector тоже не очень, особенно когда некоторые поля используют одно общее поле, да и подписка на стор не бесплатная (shallowEqual тоже конечно).
Про трюк с меморизацией, как я понимаю, его основная задача в том, чтобы не вызывать useSelector по рендеру компонента, вызванному естественным путем. Кажется не так критично, чтобы перестать писать анонимные функции в первом аргументе. На фоне того, что селектор вызывается на любое изменение стора, эта оптимизация кажется спичечной.
Прикольно, кто-то использует второй параметр) я на нашем текущем проекте тоже столкнулся с той проблемой, что иногда нужно и 5-10 полей использовать. Мы использовали правда reselect, вероятно и не очень оправданно использовали
Я однажды тоже был весьма удивлен, что деструктуризация объекта полученного из селектора может вызвать лишние рендеры (точнее не сама деструктуризация, а то что мы подписываемся на целый объект, а не только на свойства полученные через деструктуризацию). Но я просто делаю несколько useSelector - нечасто бывает больше 2-3, стараюсь декомпозировать компоненты. Нужно будет проверить как-нибудь, что быстрее - несколько useSelector или один, но со вторым параметром-функцией
В чистом виде он ещё проще.
function useSelector(selector){
const store = useStore();
const [state, setState] = useState(selector(store.getState()));
useEffect(() => {
return store.subscribe(() => {
const result = selector(store.getState());
if (!shallowequal(state, result)) {
setState(result);
}
});
}, [state]);
return state;
}
как раз этой темы планировал коснуться в следующем видео)
Мб у меня практики мало , но оч сложно..
Круто! Спасибо за объяснение useSelector!
Как всегда контент на высоте) Клево было бы послушать про reselect, а в частности про функцию createSelector из RTK. Спасибо!)
Спасибо!) Есть план сделать видео про createSelector чуть позже)
Теперь я знаю как работает useSelector
Теперь я знаю как работает useSelector
Теперь я знаю как работает useSelector