А у нас в проекте столько полей требуется из стора, что приходится возвращать всегда объект, поэтому второй аргумент почти всегда используем 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; }
@АйТи Синяк нужен ваш совет) Я обычно делаю "корневую" ф-ю селектор для конкретного редюсера (selectNewsState = (state) => state.news;), далее его использую для других селекторов + createSelector из RTK (selectNewsIsLoading = createSelector(selectNewsState, (state) => state.isLoading). Насколько хорошо или плохо все селекторы создавать, используя createSelector? Я так понимаю под капотом reselect
Насколько я понял, в видео рассмотрена еще не вышедшая версия react-redux 8.x, потому что в актуальной на данный момент версии 7.2.6 исходники другие))
Это забавная история, как я готовил этот ролик. Сначала я изучал другие исходники useSelector. И когда уже собирался писать сценарий, react-redux накатил изменения) Я начал изучать заново, решил лучше рассказывать о актуальной версии. Закончил готовить ролик, записал аудио. И потом была React conf 20201, где они рассказали про новый АПИ 18-ой версии) короче поторопился я с выпуском темы)
Есть группа людей, кто очень любит rxjs с реактом использовать, но я к сожалению еще не видел ни одного проекта, как это все работает. Постараюсь еще получить этот опыт как-нибудь :)
@@it-sin9k один раз попробовав rxjs уже не хочется от него отказываться :) Я не встречал хороших решений, которые позволяют "подружить" rxjs с реактом без редакса. Мы используем собственное решение. Возможно рано или поздно оно станет опенсорсным.
а как быть, когда в селектор нужен параметр? я знаю два способа передачи 1) useSelector((state) => mySelector(state, param)) 2) useSelector(mySelector(param)) Какой из них лучше практиковать или что вообще посоветуете в данном случае?? Тот же вопрос при использовании createSelector
Классное видео и много полезного Я вот только что-то туплю и не пойму 3ий пункт из части итогов Если мы из селектора не возвращаем новый объект, то что нам по хорошему нужно возвращать ?
Вопрос немного сложно составлен. Суть третьего пункта в том, что всегда нужно возвращать прежнюю ссылку на объект / массив, если хотите избежать неожиданных рендеров. Как именно это работает я рассказывал на примере mapStateToProps. Там логика точно такая же. Посмотрите вот это видео (th-cam.com/video/bqQI9rFm1ro/w-d-xo.html)
Здравствуйте, у вас есть успехи в изучении паттерна Репозиторий и применений его в проектах React? Очень хотелось бы услышать ваше мнение об этом и увидеть применение его.
Не первый раз, слышу в комментариях, что многим интересен этот паттерн. Я его не раз уже читал. Но честно говоря я использую немного другой подход. Тоже целый ряд абстракций и тому подобное :) Чтобы об этом паттерне рассказывать, нужно найти людей, которые в продакшене его используют и пообщаться)
Неплохо было бы записать видео (может оно уже есть и я просто прошел мимо) на тему минусов Редакса. Я не о многословности (оно решается с помощью Redux Toolkit), а о том, что Редакс может создавать излишние связи между разными компонентами в проекте.
Есть мысль такая, если есть более детальные примеры недостатков Redux я был бы рад их тоже добавить в будущее видео :) или пришлите на почту материалы, которые у вас есть) blue.sin9k@gmail.com
Крутяк!!! Сразу подписка после просмотра.
Добро пожаловать на канал!
Спасибо! Теперь я знаю как работает useSelector
Теперь я знаю как работает useSelector
Еще раз убедился в важности того, чтобы следить за тем когда значения сравниваются по ссылке в react. Спасибо за выпуск
useSelector с Reselect-ом отлично дополняет друг друга
Спасибо! Очень познавательно!
Спасибо за контент Александр!
Спасибо! 💪
Годный разбор, спасибо. Теперь я знаю как работает useSelector
очень даже очень, спасибо
Круто! Спасибо за объяснение useSelector!
Отличный контент, не останавливайтесь)
Нет планов останавливаться, только вперед!)
Как всегда контент на высоте) Клево было бы послушать про reselect, а в частности про функцию createSelector из RTK. Спасибо!)
Обязательно будет ролик про reselect!)
Спасибо!
Не знал , теперь знаю)))
в целом было полезно я думаю, я даже пока не знаю для чего нужен этот useSelector правда
Спасибо большое!
Теперь я знаю как работает useSelector )))
Большое спасибо. Классное видео
Большое спасибо, максимально полезный контент!
Спасибо!) Если поделитесь с коллегами, будем очень признательны!)
Спасибо за науку.
Спасибо за просмотр.
Оч. круто.
спасибо!
Офигенное видео!!!
Не забудьте поделиться им с вашими коллегами, мы будем очень признательны!)
Интересный видос 😊
Очень интересно, ждем reselect :)
Теперь я tochno знаю как работает useSelector
Cool! Nice life hack
Крутяк, спасибо!
Отличный разбор и что самое главное на основе этого разбора разработчики могут увидеть что «лезть в исходники» это очень полезно ;)
Спасибо :)
это одна из идей моих видео, помочь разработчикам не бояться исходников
А у нас в проекте столько полей требуется из стора, что приходится возвращать всегда объект, поэтому второй аргумент почти всегда используем
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;
}
как раз этой темы планировал коснуться в следующем видео)
@АйТи Синяк нужен ваш совет) Я обычно делаю "корневую" ф-ю селектор для конкретного редюсера (selectNewsState = (state) => state.news;), далее его использую для других селекторов + createSelector из RTK (selectNewsIsLoading = createSelector(selectNewsState, (state) => state.isLoading). Насколько хорошо или плохо все селекторы создавать, используя createSelector? Я так понимаю под капотом reselect
Про reselect будет отдельное видео, там постараюсь поднять этот вопрос)
Насколько я понял, в видео рассмотрена еще не вышедшая версия react-redux 8.x, потому что в актуальной на данный момент версии 7.2.6 исходники другие))
Это забавная история, как я готовил этот ролик. Сначала я изучал другие исходники useSelector. И когда уже собирался писать сценарий, react-redux накатил изменения) Я начал изучать заново, решил лучше рассказывать о актуальной версии. Закончил готовить ролик, записал аудио. И потом была React conf 20201, где они рассказали про новый АПИ 18-ой версии) короче поторопился я с выпуском темы)
Спасибо! Хоть я и не использую Redux в повседневной разработке, все равно интересно узнавать подобные нюансы.
А какой стек у вас используется?) доберусь и до вашего стека может в будущем)
@@it-sin9k react + rxjs. Без сторонних стейт менеджеров
Есть группа людей, кто очень любит rxjs с реактом использовать, но я к сожалению еще не видел ни одного проекта, как это все работает. Постараюсь еще получить этот опыт как-нибудь :)
@@it-sin9k один раз попробовав rxjs уже не хочется от него отказываться :)
Я не встречал хороших решений, которые позволяют "подружить" rxjs с реактом без редакса. Мы используем собственное решение. Возможно рано или поздно оно станет опенсорсным.
круто) если выложите в open source пишите, я может обзор на него сделаю)
Тот момент когда не польщуешься редаксом(иногда лучше дрилить и композиции делать чем редакс), но видео отличное :)
Спасибо) А какой стек у вас на проекте?)
а как быть, когда в селектор нужен параметр? я знаю два способа передачи
1) useSelector((state) => mySelector(state, param))
2) useSelector(mySelector(param))
Какой из них лучше практиковать или что вообще посоветуете в данном случае??
Тот же вопрос при использовании createSelector
Классное видео и много полезного
Я вот только что-то туплю и не пойму 3ий пункт из части итогов
Если мы из селектора не возвращаем новый объект, то что нам по хорошему нужно возвращать ?
Вопрос немного сложно составлен. Суть третьего пункта в том, что всегда нужно возвращать прежнюю ссылку на объект / массив, если хотите избежать неожиданных рендеров. Как именно это работает я рассказывал на примере mapStateToProps. Там логика точно такая же. Посмотрите вот это видео (th-cam.com/video/bqQI9rFm1ro/w-d-xo.html)
Здравствуйте, у вас есть успехи в изучении паттерна Репозиторий и применений его в проектах React? Очень хотелось бы услышать ваше мнение об этом и увидеть применение его.
Не первый раз, слышу в комментариях, что многим интересен этот паттерн. Я его не раз уже читал. Но честно говоря я использую немного другой подход. Тоже целый ряд абстракций и тому подобное :) Чтобы об этом паттерне рассказывать, нужно найти людей, которые в продакшене его используют и пообщаться)
Спасибо за объяснение (⌒‿⌒)
Мб у меня практики мало , но оч сложно..
Неплохо было бы записать видео (может оно уже есть и я просто прошел мимо) на тему минусов Редакса. Я не о многословности (оно решается с помощью Redux Toolkit), а о том, что Редакс может создавать излишние связи между разными компонентами в проекте.
Есть мысль такая, если есть более детальные примеры недостатков Redux я был бы рад их тоже добавить в будущее видео :) или пришлите на почту материалы, которые у вас есть) blue.sin9k@gmail.com
Теперь я знаю как работает useSelector
Круто! Спасибо за объяснение useSelector!
Как всегда контент на высоте) Клево было бы послушать про reselect, а в частности про функцию createSelector из RTK. Спасибо!)
Спасибо!) Есть план сделать видео про createSelector чуть позже)
Теперь я знаю как работает useSelector
Спасибо за отличный видос!
Теперь я знаю как работает useSelector