Тёмный

MOBX ПРОТИВ REDUX | РАЗБИРАЕМСЯ ЧТО ЛУЧШЕ 

Ayub Begimkulov
Подписаться 11 тыс.
Просмотров 11 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 114   
@promoabys
@promoabys Год назад
Классно, что обрисовал разницу в подходах. В остальном тоже всё интересно. Оценка по практике тоже всегда полезна и на мой взгляд крайне корректная ,) Супер, спасибо!!!
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад помочь!
@igor_ni
@igor_ni Год назад
Впал в транс, когда смотрел ролик. Очнулся в конце. 😄 Отличное изложение! Спасибо большое!
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад, что понравилось.
@sergey_c
@sergey_c 7 месяцев назад
Спасибо большое за эти примеры с кодом! Помогло быстро понять суть редакса и отличий.
@BlueCell
@BlueCell Год назад
Супер контент! Не заслуженно мало просмотров и сабов
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк! Думаю надо подачу улучшать - а остальное дело времени.
@a4y_m5r
@a4y_m5r Год назад
Топовый видос, спасибо за труд! 👍
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк!
@WebEnv
@WebEnv Год назад
Можно больше про МобХ, уж очень мало про него информации на Ютуб. Спасибо за материал!
@ayub_begimkulov
@ayub_begimkulov Год назад
Привет. Спасибо за фидбэк! А что конкретно хочешь увидеть по MobX?
@Bugagych
@Bugagych Год назад
​@@ayub_begimkulov REACT+MST+REACT QUERY+TYPESCRIPT. Вот хотелось бы что нибудь на таком стеке.
@WebEnv
@WebEnv Год назад
@@ayub_begimkulov Хотелось бы сначала базовые понятия, как работают под капотом, как правильно работать с асихронностью, потом уже что продвинутее, по типу custom observables, lazy observables (если конечно будет инетерс у зрителей к этому). Думаю вообще в ютубе будешь одним из немногих, кто это тему поднимет. Понимаю, что у MobX нет популярности как у редакс, но может найдется отклик у тебя на канале, кому это нужно в работе.
@fayster91
@fayster91 Год назад
@@ayub_begimkulov Еще хотелось бы узнать подробно про mobx-state-tree и mobx-keystone. Например опыта с mobx особо нет, однако когда начинаешь читать документацию и статьи, то натыкаешься на эти библиотеки и до конца не понятно, что они такого дают на практиче, чего нет у ванильного mobx
@moneyandfame9748
@moneyandfame9748 Год назад
@@ayub_begimkulov оптимизация обзерверов с mobx. как пишут в документации, что их "мировозрение" отличается от того же redux, почему нужно разбивать все на более мелкие компонент и тд
@iganza-p1p
@iganza-p1p Год назад
Спасибо за видео, отличный контент
@ayub_begimkulov
@ayub_begimkulov Год назад
Не за что!
@biLLie_wiLLie
@biLLie_wiLLie Год назад
34:35 Кэш менеджмент - это rtk query и react query? Они считаются стейт менеджерами на минималках для простых проектов? Используются вместе со стейт менеджерами?
@paemox
@paemox Год назад
Redux Toolkit и MobX - для локальных состояний (тема, пользователь), RTK Query и React Query - для состояний на сервере (содержимое таблиц базы данных).
@biLLie_wiLLie
@biLLie_wiLLie Год назад
@@paemox можно хранить стейт на сервере?
@paemox
@paemox Год назад
@@biLLie_wiLLie клиентское состояние лучше не хранить на сервере, но почти всегда есть база данных, котороя и является серверным состоянием (stateful server). Балансировщики нагрузки, сервера приложений - это сервера без состояния (stateless server).
@grenadier4702
@grenadier4702 Год назад
@@paemox У тебя формулировки какие-то очень странные. Mobx/Редакс (toolkit + query) - это для глобального состояния, в котором хранятся какие-нибудь (серверные) данные
@grenadier4702
@grenadier4702 Год назад
Mobx - для данных типа текущего юзера/темы/управления сложным ui. Context Api + swr/react-query - для всего остального. Каждую страницу, где нужны данные, оборачиваешь в контекст и прокидываешь необходимые данные
@smartestbox
@smartestbox Год назад
Айюб, очень хотелось бы увидеть небольшой разбор реального проекта на базе React, чтобы понимать, как там все взаимодействует и примерный уровень вхождения для джунов. А то вроде думаешь, что идешь по нужному пути, но все равно есть сомнения в правильности или достаточности знаний
@valentineserebreanu398
@valentineserebreanu398 8 месяцев назад
прикольно, что подход разный, но у меня быо представление, что mobx как-то связан с rx js. и как бы прикольно, observable , но по сути , какая разница, когда тебе не приходится особо с этим работать? оно все под капотом делает, и визуально работает так же, как редакс. в принципе не очень понимаю зачем Mobx использовать, если у него размер больше, чем даже у тулкита, а у тулкита громадные возможности, встроенные плагины типа query и thunk и можно очень много чего с ним сделать. а с mobx тебе придется самим все писать?) причем useSelector работает похожим образом, он подписывается на обновления и если значение меняется стейта, только тогда он делает forceRender компонента, который использует useSelector
@TheTexPro
@TheTexPro Год назад
Спасибо большое!
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад помочь!
@raidenraiden7938
@raidenraiden7938 Год назад
Привет, спасибо за полезный контент
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад помочь!
@Qwqwqwqwqwq-rn7ny
@Qwqwqwqwqwq-rn7ny Год назад
Привет. Есть в планах видео про recoilJS?
@Volodymyr-y1c
@Volodymyr-y1c Год назад
Слушай, а подскажи пожалуйста, при мини-реализации mobx во время первого запуска autorun записываются все все проперти (для которых сработал get) и зависимости в deps map. Но что если есть некоторые зависимости внутри if'ов и при первом запуске autorun геттер на них не сработает. Будут ли тогда те свойства реактивны?
@ayub_begimkulov
@ayub_begimkulov Год назад
Да, они станут реактивными, но только после того, как пройдет if внутри которого они лежат.
@UghurAliyev
@UghurAliyev Год назад
а можно использовать в крупных проектах rtk query для запросов ? или лучше руками через axios все делать ? а так урок офигенный , как всегда ты лучший )
@paemox
@paemox Год назад
Лучше React Query для запросов, RTK Query не всегда можно применить и напоминает Backbone.
@AleksandrNeo
@AleksandrNeo Год назад
@@paemox Привет. А почему нельзя его всегда применить?
@iganza-p1p
@iganza-p1p Год назад
В RTQ нет infinite query
@ayub_begimkulov
@ayub_begimkulov Год назад
можно конечно. но если привязки к redux нет - то лучше брать react-query (как уже отписали ниже).
@vadimmarchenko3128
@vadimmarchenko3128 11 месяцев назад
Молодец
@alcor9921
@alcor9921 Год назад
Спасибо за труд! Было бы неплохо, если б презентация была в темной теме, глазам больно. Хотя тут кому как наверное, но редактор кода же в темной теме, неплохо было бы придерживаться одной темы
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк! Попробую в темной снять, посмотрим, как получится. Но так вообще у меня и барузер в белой, так что тут одинаково все равно везде не будет.
@СергейМельниченко-у8п
@СергейМельниченко-у8п 8 месяцев назад
Не писал фронт 4 года, появилась нужда в своем сайте, зашел сюда чтобы определиться с выбором стейт менеджера и у меня задница к креслу прилипла от такого колличества синтаксического сахара
@vik_2743
@vik_2743 7 месяцев назад
да напиши всю приложуху в одном файле на простой ваниле, сдай проект, получи деньги и забей. ну что как маленький
@stanislavs3513
@stanislavs3513 Год назад
лайк однозначно
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@sergeyfrantsev4449
@sergeyfrantsev4449 Год назад
ты лучший!)
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо!
@fedordostoevskiy4209
@fedordostoevskiy4209 Год назад
👍, но для меня redux простой был только на todo. Saga, middleware, таймеры всякие, вечные перерендеры. Я вешался просто вначале. 🤬🤯🥵 Везде пишут, что redux тупой, простой, но додумался только Абрамов, не Facebook даже с flusk!!!. Wtf ???
@paemox
@paemox Год назад
Тоже самое, освоил "сложный" MobX, а "простой" Redux так и не смог.
@ayub_begimkulov
@ayub_begimkulov Год назад
Есть такое. Но в любом случае, понять как работает Redux легко, а MobX для многих "магия". Ну и в целом с Redux все знакомятся еще во время изучения реакт. А так я согласен, что Mobx намного легче.
@paemox
@paemox Год назад
@@ayub_begimkulov Redux не обязателен для React, там даже другая комманда разработчиков. Разве что отсталые курсы пихают его по привычке. React Query более актуален - в веб приложениях состояние хранитса в основном на сервере.
@ayub_begimkulov
@ayub_begimkulov Год назад
​@@paemox Я вроде про обязательность redux вместе с react и не говорил) А у react-query же цель вообще другая. Это кеш менеджмент, а не глобальное хранилище стейта. Понятное дело, что есть много приложений, где можно redux полностью на react-query поменять, но это уже другой разговор же.
@sharkman6434
@sharkman6434 Год назад
Спасибо огромное, расскажи пожалуйста про кеш менеджмент в частности про rtk query, интересует кейс когда получаешь массив объектов с бд , как его поля изменять и опять записать в бд ( пока только думаю закидывать в массив стейта, от туда мапить в компоненте фильтруя по айдишнику и метать опять в стейт чтоб потом закинуть на сервак, получается дичь, уроки в основном по примитивным тудушкам одностроковым везде а как объекты менять не показывают )
@Vitlsa
@Vitlsa Год назад
Спасибо за видео. Если будет интересно - сделай пожалуйста примеры архитектурных решений MobX и их сравнение
@ev_geniy17
@ev_geniy17 Год назад
Zustand
@paemox
@paemox Год назад
Zustand выглядит проще чем Redux Toolkit, но MobX еще проще. Непонятно зачем вообще нужен Zustand и какие у него преимущества.
@ev_geniy17
@ev_geniy17 Год назад
@@paemox да я просто так написал когда увидел, что у него за неделю миллион установок как и мобх. А так да пробовал и то и то, мне тоже кажется мобх проще, плюс если сложная бизнес логика можно в ооп писать.
@paemox
@paemox Год назад
@@ev_geniy17 Непонятна популярность Zustand, MobX лучше его во всем, кроме размера библиотеки, но кому нужны диалапщики?
@paemox
@paemox Год назад
Zustand - это Redux Toolkit здорового человека.
@AlexanderPozhidaev
@AlexanderPozhidaev Год назад
mobx крутой) В редаксе как вариант еще в useSelector можно было передать вторым параметром функцию, которая бы контролировала ререндер
@ayub_begimkulov
@ayub_begimkulov Год назад
Да, можно. Но в первом случае она бы не особо помогла, там в любом случае надо было бы весь лист перерендеривать.
@romandeveloper7720
@romandeveloper7720 Год назад
Привет! А если redux toolkit использовали бы, то он бы не стал ререндерить весь лист при изменении одного айтема?( То есть тут они с mobx похожи, да? )
@ayub_begimkulov
@ayub_begimkulov Год назад
В видео мы не использовали чистый редакс. Все примеры было на тулките. Так что тут он сильно не поможет.
@romandeveloper7720
@romandeveloper7720 Год назад
@@ayub_begimkulov, странно.. А почему так. Тулкит ведь точечно тогл делает для отдельного элемента, то есть мутирует и проксями ловит. Нет же иммутабельности, из-за которой весь лист пересоздается. Или он под капотом иммутабельность эту делает подобно бойлерплейтному дефолтному редаксу?
@alexandroppolus
@alexandroppolus Год назад
@@romandeveloper7720 тулкит использует библиотеку Immer. В редьюсере всё выглядит как мутабельное изменение объекта, но это ты меняешь черновик. Далее с помощью Immer по изменению черновика будет создан новый объект, с которым поступят по стандартным правилам Редукса - т.е. заменят старый объект на новый, причем так же и на всех уровнях выше. Тулкит нужен для некоторого удобства кодинга, но природа Редукса остается прежней.
@Умарбек-Махмадиев
@Умарбек-Махмадиев 3 месяца назад
zustand лучше
@sanbuz
@sanbuz 3 месяца назад
Спасибо! очень помогло
@skv1991
@skv1991 8 месяцев назад
Хорошо все разложил, молодчина, спасибо тебе за качественный материал, структурированность и хорошую подачу 👍 Ну и звук отличный 👏
@ВладиславСвидерский-г6й
Айюб, большое спасибо! Интересно было узнать, как MobX и Redux работают под капотом. Хак с оптимизацией тудушек крутой👍
@ayub_begimkulov
@ayub_begimkulov Год назад
Спасибо за фидбэк!
@роматарасов-о8л
я наоборот думаю что новичку мобикс легче понять хочу узнать твоё мнение насчёт того какую вещь лучше использовать для загрузки данных с бека на redux(thunk vs createThunk vs RTK-query)
@paemox
@paemox Год назад
RTK, MobX - для клиентских состояний, а для данных с бека лучше React Query.
@grenadier4702
@grenadier4702 Год назад
Если не хочешь pain in the ass, то бери mobx для глобальных данных типа текущего юзера или для управления сложным ui, а для остального - контекст + swr/react-query
@роматарасов-о8л
мужики, вы недостаточно точно поняли вопрос. я сам на всех своих проектах имел стек mobx + react-query(с кайфом). но у меня на работе redux, я хочу узнать что круче для управления кешем и это внедрить(внедрение не бесплатно, поэтому надо сначала очень хорошо понять что лучше)
@paemox
@paemox Год назад
​@@роматарасов-о8л по-моему лучше MobX и React Query сейчас не найти.
@grenadier4702
@grenadier4702 Год назад
​@@роматарасов-о8л можешь оставить редакс для того, для чего он сейчас применяется и использовать конекст + react-query/swr для кеша. На своем проекте я использую swr
@paemox
@paemox Год назад
А где ссылки на код?
@ayub_begimkulov
@ayub_begimkulov Год назад
Добавил. Спасибо, что отписал.
@amina_tulips
@amina_tulips Год назад
Спасибо большое!❤️
@ayub_begimkulov
@ayub_begimkulov Год назад
Рад помочь!
@Pretzel318
@Pretzel318 Год назад
Блин, а у меня возник вопрос с туду листом и mobx, обязательно ли там создавать context.js? Я делала проект, где просто создавала store и просто в обернутом в observer компоненте дёргала нужный класс.. И теперь мне кажется, что я делала неправильно(
@ayub_begimkulov
@ayub_begimkulov Год назад
Нет, можно и без контекста обойтись. Однако если использовать контекст, то будет проще тестировать, так как можно будет в контекст передавать фейковый стор с нужными данными.
@viktorsavchenko2628
@viktorsavchenko2628 Год назад
А как же Effector или Zustand ? Уже давно появились стейт менеджеры намного мощнее этих двух.
@ayub_begimkulov
@ayub_begimkulov Год назад
А почему ты считаешь, что они мощнее? Можешь раскрыть мысль? Чем редакс - вполне возможно. Это по сути его аналоги с небольшими изменениями/улучшениями. А MobX вообще же о другом. Мутабельность, прокси под капотом и соответсвенно меньше не нужных рендеров и вычислений. Как по мне, это немного разные вещи. И у MobX особо сейчас не вижу конкурентов.
@tomitomion1179
@tomitomion1179 Год назад
"все реактивные значения должны использоваться внутри реакции" ну да, наверно. Ты о чем вообще, че за реакция?
@ayub_begimkulov
@ayub_begimkulov Год назад
Привет. Не уделил внимания в видео этому моменту. Реакция - это функция (callback переданный в autoRun). Она будет вызываться тогда, когда поменяются реактивные значения, используемые внутри нее. Вот наглядный пример: ```ts const state = observable({ a: 5, b: 'test' }); // функция-колбэк будет реакцией autoRun(() => { console.log(state.b); }); ```
@paemox
@paemox Год назад
Реакции - это функции-обработчики изминения состояния хранилища.
@tigranavushian2706
@tigranavushian2706 Год назад
effector !
@ayub_begimkulov
@ayub_begimkulov Год назад
Effector скорее redux'у конкурент.
@АлександрКос-р3щ
зачем так тараторить?
@ayub_begimkulov
@ayub_begimkulov Год назад
в новых видео речь должна лучше быть)
@artyomtaranenko2267
@artyomtaranenko2267 Год назад
После перехода на rtk, я полюбил редакс ещё сильнее, там уже нет никакого бойлерплейта (возможно моего опыта мало, что бы судить объективно), большое кол-во необходимых фитч есть под капотом. Всё никак не доберусь до zustand, хотя ещё помню, что бы jotai, но как всегда отмазки - время, работа и тд (
@paemox
@paemox Год назад
Не бойлерплейта только в MobX, а во всех твоих библиотеках есть в некой мере, Redux, RTK - больше, другие - меньше.
@airpodsclub6443
@airpodsclub6443 Год назад
zustand более лаконичнее смотрится конечно чем редакс или мобх, я думаю он скоро должен вытеснять их
@artyomtaranenko2267
@artyomtaranenko2267 Год назад
Далеко не скоро, будет куча проектов, которые нужно будет поддерживать. Жикури и пхп до сих пор живут
@paemox
@paemox Год назад
MobX - лаконичнее Zustand, в нем ООП и мутабельность состояния из коробки. В Zustand всего лишь чуть меньше boilerplate чем в Redux.
@ayub_begimkulov
@ayub_begimkulov Год назад
Вижу под видео очень много подобны комментов. Но тут нужно учитывать, что подходы работы со стейтом у zustand/redux другие по сравнению с mobx. zustand - это по сути улучшенный redux. Если глянешь в исходники (github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L100) там такой же стор считай создается, как и в redux. А MobX на прокси основан, то есть каждый компонент понимает, на какой именно части стейта он завязан. Соответственно лишней работы вообще не будет. Ну и в целом работа со стор немного другая с точки зрения DX. Пока у MobX я прям не вижу конкурентов, однако хотелось бы.
@paemox
@paemox Год назад
@@ayub_begimkulov У MobX конкурент - valtio.
@TheTexPro
@TheTexPro Год назад
@@ayub_begimkulov MobX - он такой один)
Далее
КАК БОМЖУ ЗАРАБОТАТЬ НА ТАЧКУ
1:36:32
Witch changes monster hair color 👻🤣 #shorts
00:51
Разбираемся в React JSX
13:49
Просмотров 8 тыс.
Intro to MobX-State-Tree
15:23
Просмотров 4,3 тыс.
КАК БОМЖУ ЗАРАБОТАТЬ НА ТАЧКУ
1:36:32