Recoil: «‎Redux я иду за тобой...»

Recoil.js - новый стейт-менеджер в React.js, которому пророчат большое будущее. Но сможет ли он навязать конкуренцию Redux?
0:00 Что происходит с Redux?
01:38 Что за Recoil.js?
02:39 Атомы
04:08 Селекторы
5:46 Асинхронные запросы
7:07 Кто выше, сильнее, быстрее?
7:51 Эпилог
______________________________
Один из моих самых любимых каналов о Фронтенде в telegram:
t.me/frontendnoteschannel
______________________________
RecoilJs: recoiljs.org/
Ролик про React18 и конкурентный режим: • О дивный новый Реакт 1...
Видео с ReactEurupe:
• Recoil: State Manageme...
Fireship про big O:
• Big-O Notation in 100 ...
#reactjs #react #recoiljs #javascript

[@it2138]

Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити за 99 рублей: boosty.to/how-to-learn-it Какие тренажеры бывают: htmlacademy.ru/courses#fe-start Подписывайтесь: t.me/howToLearnIT ______________________________ 0:00 Что происходит с Redux? 01:38 Что за Recoil.js? 02:39 Атомы 04:08 Селекторы 5:46 Асинхронные запросы 7:07 Кто выше, сильнее, быстрее? 15:39 Эпилог ______________________________ RecoilJs: recoiljs.org/ Ролик про React18 и конкурентный режим: kzbin.info/www/bejne/aIjNoXqbibCkr6c Видео с ReactEurupe: kzbin.info/www/bejne/lXq2cnSVf9lsoas Fireship про big O: kzbin.info/www/bejne/nWPSY2V5aKiFnLc #reactjs #react #recoiljs #javascript

[@user-ql4hi5hm1d]

При чем здесь стейт менеджеры вообще и аполо клиент?) Или ты не отличаешь СТЕйТ от КЭША ДАННЫХ С API?)))

[@user-md3pp2nl4l]

Очень похоже, что появляется новый сильный конкурент, который имеет все шансы по популярности приблизиться к Redux и стать обычным решением для большинства проектов(чего не вышло у всех остальных новомодных тулзов). Тем более, что за спиной данного решения целый Facebook... Автор, ты только не забрасывай канал и не обращай внимания на небольшие просмотры. Гораздо важнее качество аудитории, чем ее масштаб(всякие Хауди Хо и Гоши Дудари тому подтверждение). У тебя получается очень качественный контент, который приятно и полезно смотреть не только джунам и интересующимся, но и ребятам поопытнее. Продолжай в том же духе и удачи тебе!

[@nurdanelemanov9620]

Effector: Я иду за вами

[@kamenskiyyyy]

Согласен, уж очень схож синтаксис)

[@antonvlasov9362]

@@kamenskiyyyy у эффектора совершенно другая концепция. Это как React и Angular в мире стейтменеджеров, где условный Recoil - это React, либа для управления состоянием, а Effector - здоровенный Angular Фреймворк с уже написанной экосистемой из модулей Схожи они только тем, что оба используют функции

[@Nick-hq8of]

Здорова, обожаю тебя, так держать, спасибо за инфу

[@user-md5mw1tp3e]

Любопытно, надо для своих проектов попробовать)

[@romanroman4308]

круто, спасибо за видео

[@TEMA2294]

интересное видео, спасибо

[@alexeyilin1527]

Класс, установил на пет проект, теперь буду на нём писать

[@it-sin9k]

Спасибо за видео :) Брать комментарий Марка Эриксона за 2019 год кажется не уместным в 2022. React выпустил хук useSyncExternalStore, который решает проблему с concurrent модом. Более того Redux уже переписан на использование этого хука. Поэтому аргумент, что Redux не готов к чему то, это точно не справедливо. Более того React кор тим, знает как много разрабов по миру использует Redux и точно не допустит какой то несовместимости этой либы с новой версией React.

[@user-lw1ze5is2r]

Привет, спасибо большое за твои видео! У меня к тебе просьба - расскажи как-нибудь про remix js. Ты просто суперски рассказываешь «что там под капотом»! :)

[@user-hd3ov5lj1u]

ураааа, новый видос!

[@lord8360]

Че такое мобх редакс, я знаю только эффектор 🤓👌

[@denisgoncearuc7167]

Я использую Jotai, он похож на Recoil. Но нам он как то больше понравился. + Его можно использовать вместе с Zustand (аналог Redux). Что я и делаю. Не самое популярное решение, но выглядит не плохо

[@vladprodan7010]

Круто! Давай теперь про Zustand.

[@user-vu6hn4ul2i]

В целом, прикольная штука, посмотрим

[@THEGhost902]

Большинство перечисленных проблем редакса вначале видео, связаны с тем что в компонентах не должно быть бизнес логики, и судя по тому что сказано в видео дальше про рекоил, он этой проблемы никак не решает. В редаксе это решается сагами. По моему мнению единственный существенный минус у редакса в текущих реалиях это вызов всех редюсеров приложения на любой диспатч

[@cinques]

Саги могут не всем понравиться, можно просто thunk’и. А если нужна работа именно с серверными данными, кэш, управление запросами, то лучше взять relay/apollo/rtk-query

[@sovaz1997]

@@cinques или react-query

[@user-uv5je3tv2i]

Там автор в конце указал, что селекторам можно указать сетер, в котором и можно прописать бизнес логику. Как для меня, довольно амбициозная библиотека

[@ruslanpostoiuk4963]

то-есть вся бизнес логика должна быть в самом редаксе ?

[@redhook777]

@@ruslanpostoiuk4963 по-хорошему да. Принцип единой ответственности из solid. Компонент должен только отрисовывать данные

[@Igor-yh4gl]

Реквестирую сравнение с effector

[@cinques]

все перечисленные недостатки уже давно решены в rtk; плюс они завезли rtk query, так что редакс будет на подъеме в ближайшее время; у рекойла самая главная проблема что вне реакта он не применим, так что далеко не во всех проектах подойдет; и довольно давно не могут зарелизить даже 1.0 версию

[@alienspro]

rtk тяжелый, многие компании отказываются от него из-за веса. Да и вечные мемоизированные селекторы...

[@cinques]

@@alienspro 19kB?

[@alienspro]

@@cinques недавно избавился от него на проекте, почти 300kb освободилось в бандле

[@cinques]

@@alienspro странно, я сейчас прям глянул сколько у нас честных, 32kb 1.5.0 версия правда

[@user-lo9bx9mb4o]

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

[@soulwind7577]

Ну да, для vuex тоже появился новый Paninia, вроде ничего так, можно попробовать будет, очень удобно работать с ним в composition api

[@antonkuchmii8048]

Pinia?

[@oktavic777]

О прикольно, react по немногу становится angular'ом.

[@yrsafam]

А не изобрели ли они аналогичные механизмы, что и есть в mobx?) Кроме нового механизма в React 18

[@gatrianL]

Про SOLID будет видео?

[@user-tx8te8dh9n]

Зачем это все, когда есть mobx?

[@andygr1n1]

золотой комментарий )), реактивнее и удобнее чем mobx и mobx-state-tree еще ничего не встречал), даже в svelte-kit, и там всегда подключаю mst

[@EwKlidstudio]

Столкнулся с проблемой, что установить и прочитать состояние никак нельзя, кроме как через хук в компоненте. А такое иногда необходимо. Перешел не еффектор

[@sergey5565]

Очень напоминает NgRx в Angular. Концепция подписки на селекторы такая же. Только в ангуляре нет разделения на атомы и селекторы, все делается через селекторы, и их уровень сложности на твое усмотрение. Ну и соотвественно вся мощь rxjs тебе в помощь:)

[@alekseypotashov]

А можно показать на примере как размещение всего стейта приложения в Redux может негативно сказаться на производительности?

[@procodeitschool]

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

[@KycokFt]

Эта штука не хило так похожа на эффектор, но как я понял, с меньшим количеством боилерплейта в виде ивентов и эффектов

[@ievgenk.8991]

Крутое видео, спасибо! Но я так и не понял как селектор рекоила понимает от каких атомов он зависит ведь аргументом передается только get функция. Как будет проходить кеширование?

[@user-lw3vu9xz3n]

Там в get потом передается id нужного atom.

[@ievgenk.8991]

@@user-lw3vu9xz3n Да, но механизм всё равно неявный. Получается что функция селектора будет вызываться в любом случае (иначе как тогда понять к каким атомам был запрос?) и если там будет тяжелая логика то это тоже будет на производительности сказываться.

[@sealoftime]

​@@ievgenk.8991 get() внутри селектора подписывает его на следующее изменение прокинутого внутрь атома или селектора. Для динамических зависимостей тоже так: recoiljs.org/docs/api-reference/core/selector/#dynamic-dependencies

[@ievgenk.8991]

@@sealoftime Спасибо

[@user-nx2tt3vt9j]

Наверное Facebook строит экосистему для React, примерно как у Angular

[@pukalqazwsx3132]

Запиши про тестирование

[@max_mgtow]

Приветствую, Друг 🤝 Отличное видео 👍 Без Redux не представляю React

[@sovaz1997]

😂

[@kirillbarsukov6994]

Нормас

[@user-fj4nv6qj3g]

Прикольная идея с атомами. Кстати не только у них есть атомы, ещё есть такой state manager reatom. У нас на работе используется только он

[@sergeys4732]

На зустанд посмотреть тоже стоит, такие же атомарные состояния и такие же селекторы. Юзаем в проде и все довольны

[@kamenskiyyyy]

Recoil нужно было сравнивать с Effector

[@artemviveritsa9223]

А как же VALTIO? Перепробовав всё остановился на нём - очень функциональное и гибкое хранилище. Особенно радует возможность организовать его в том числе и на основе классов со всеми вытекающими плюсами.

[@solarburster]

Recoil, со слов создателя, сделали чтобы решить некоторые проблемы на некоторых продуктах корпорации. Уж никак не official way. Просто команда решила, что можно recoil выложить в открытый доступ.

[@evshushkov]

Зачем если есть RTK к примеру? У нас на проектах вообще только react-query используется..

[@mayer9228]

Так и должно быть в наше время, просто люди всё ещё не могут отойти от старого способа мышления "бизнес-логикой"

[@evshushkov]

@@mayer9228 у нас есть пару контекстов по типу темы и тд и за все серверное состояние отвечает react-query, который замечательно кеширует все

[@maxovsanyuk1033]

Використовуємо на проекті Effector 🔥дивно що так мало за нього говорять(

[@user-vu6hn4ul2i]

6:12 может я чего-то не понимаю, но "раз селекторы чистые функции" и на экране код, где мы ходим в базу данных... Давно у нас запрос к БД стал чистой функцией?

[@user-vu6hn4ul2i]

Ну и следом сразу проблема. Вопрос к знатокам: если запрос к базе данных кешируется, то что произойдёт, когда у нас есть атом с id пользователя и селектор, в котором мы ходим в БД за информацией профиля. Теперь пользователь меняет имя, но у нас запрос по id закеширован...

[@alexhvoyerify]

@@user-vu6hn4ul2i полностью согласен

[@profesor08]

@@user-vu6hn4ul2i очевидно надо помочь кешу протухнуть

[@user-vu6hn4ul2i]

@@profesor08 можно, но зачем запихивать в инструмент, который ожидает чтстую функцию (и на этом основании имеет право кешировать результат), не являющуюся чистой, а потом ему говорить, когда дропать кеш? Ну и, по классике, где-то забыть ему это указать, что всплывёт когда-то потом... Попахивает не лучшим кодом. Думаю там есть другие инструменты для этого.

[@profesor08]

@@user-vu6hn4ul2i тебе в любом случае придется что-то и где-то кешировать и потом обновлять кеш. Ну и, по классике, где-то забыть обновить. Увы. Тут надо делать обновление таким образом, чтоб оно было связано с кешем и обновляло его. Если нет для этого встроенного апи, то делаются подобные вещи элементарно обернув вызов хука в свою функцию, которая будет делать все что надо.

[@user-tn8vr5du5m]

после эфектора другие стейт менеджеры с провайдерами или обзерами кумарят) лень она такая)

[@umrzoqtoshkentov2223]

ну как Zustand?

[@user-ov8xk7cn9e]

Redux ещё не учил, уже Recoil надо, но может это и к лучшему)))

[@nazarii.lazarchuk]

Учись лучше писать на чистом JavaScript, эти все фреймворки-библиотеки не нужно учить, оно само ляжет когда пригодиться

[@user-gq1gc2br9w]

@@nazarii.lazarchuk подскажи пожалуйста, а сколько нужно времени уделить pure/vanilla JavaScript чтобы начать учить фреймворки? Может написать пару проектов без них сначала, или как?

[@ubzor1984]

тем временем в мире vue: Pinia: «‎Vuex я иду за тобой...»

[@vladimirsergeevich1269]

а что, если я скажу что можно с легкостью обходиться без Redux используя SWR)

[@xeleos]

давно юзал эту штуку, одни положительные эмоции, как и от mobx. А от redux свалил давно и никогда не вернусь (с ним был производственный ад, особенно когда половина людей в команде не понимает как юзать саги). Да и вообще на vue перешёл с реакта.

[@vovasoltys]

Redux Toolkit решает эти проблемы

[@user-lo9bx9mb4o]

Зачем идеальному редакс это вообще было нужно?)

[@mayer9228]

У реакта уже есть контекст, но почему-то многие не считают его за достойную альтернативу чему-либо. Понятия "стейт-менеджмент" и "бизнес-логика" сейчас уже являются устаревшими, ибо ВНЕЗАПНО оказалось, что наша бизнес-логика состоит на 95% из кэша! Итого - для кэша используем инструменты для кэша, оставшиеся 5% держим в контексте. И не надо мне тут про проблемы с производительностью контекста, для маленького стора селекторы не нужны.

[@nazarii.lazarchuk]

Согласен. Не понимаю какая может быть бизнес-логика на фронтенде, которая должна глобально где-то лежать. Это как раньше всё в объект window сохраняли, что бы можно было говнокодить, так и сейчас эти стейтменеджеры (по сути имутабл глобальная переменная)

[@GeraltTheSLAYER]

больше либ богу либ

[@user-il3xh5di2i]

Некорректно использован термин связанности и зацепление, в точности до наоборот

[@user-hn1ph6ry8l]

Выглядит любопытно. Редакс был прорывным в свое время, но по факту схема там конечно в соседний подъезд через Марс. Но вообще Реакт становится душнилой, как Ангуляр, чем дальше тем больше. Такое впечатление что в кор команду пришли все эти профессионалы Java и принесли всю эту чушь про "большие корпоративные системы", чтоб их так. За Vue будущее, он гораздо комфортнее по ощущениям, да и новых штук там насыпали в последнее время.

[@zhmenia]

Ну ок, облизал, поцеловал - а минусы где?

[@Glotka]

В крупных компаниях редакс уже отходит к проотцам, много проектов на MOBX делают

[@alienspro]

Тоже уходим от Redux на Mobx, мы одни из топовых страховых агрегаторов

[@alienspro]

Rtk тот еще монстр жрущий память

[@nurdanelemanov9620]

@@alienspro в сторону чего уходите?

[@max_mgtow]

Впервые такую чушь слышу 🤔

[@user-lo9bx9mb4o]

​@@max_mgtow Ну друже, если ты не в курсе то это не значит что это чушь) Если бы с редакс было бы все ок, то никто не стал бы делать ни RTK ни Recoil, подумай об этом на досуге.

[@stigmat4j]

Зачем это всё, если есть контекст апи?

[@EasyITChannel]

Видел много проектов, где redux использовался так, что любая другая библиотека, а также ее отсутствие дадут лучший результат. На мой взгляд, вина в таком случае не ридакса. Может быть, самую малость и дева, который это все понаписал. Надеюсь сравнение производительности не производилось между «самым кривым, большим и реальным» приложением на ридакс и «большим идеально оптимизированным тестовым» приложением на (подставить любимую либу/фреймворк). Это мне напоминает холивар на тему что круче бои без правил или тхэквондо. Кажется, что, конечно, бои без правил. А в реальности оказывается подготовка конкретного бойца решает (у нас - дева 😅)

[@user-ns5gd6eh4t]

Все что сделано в Фейсбук- кака

[@redhook777]

И react?

[@saskirakosyan5268]

Mobx better than redax. But recoil I do not know.

[@procodeitschool]

Я думаю суть в непонимании какую конкретно проблему решает Redux. Очень странные замечания в видео, я бы мог очень легко оспорить любое из них либо показать элементарное решение озвученных проблем. Это без проблем, напишите если надо Но допустим. Взамен редакса Рекоил? Это даже не смешно. 200 тысяч скачиваний за неделю, для сравнения у редакса 7 миллионов. Библиотека не популярна и на то есть причины. Активное скачивание библиотеки началось в апреле 2020. Если такая крутая либа, почему за два года, всего 200 тысяч в неделю дошел и идет на спад? А ведь идет на спад. нпм тренд показывает что помимо периодических скачков интереса, очевидно после подобных видео, в целом люди не переходят на нее и возвращаються к своим предыдущим либам. Само представление либы. Ну к примеру атом... а вам не кажется что это обычный аналог редьюсера? Нет ну серьезно... что поменялось для разработчика? Ничего. Я так понял отсуцтвуют экшен тейпы. Но они же там не просто так. Как менеджментить хаос на большом приложении? Рекоил скорее конкурент мобиксу, точно не редаксу. Они решают разные проблемы. Но против мобикса, у рекойла врядли есть шансы.

[@seminioni]

Конечно понимаю что без видеоряда никуда, но порой он такой кринжовый))