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

[@Vitlsa]

Спасибо за видео. Если будет интересно - сделай пожалуйста примеры архитектурных решений MobX и их сравнение

[@WebEnv]

Можно больше про МобХ, уж очень мало про него информации на Ютуб. Спасибо за материал!

[@ayub_begimkulov]

Привет. Спасибо за фидбэк! А что конкретно хочешь увидеть по MobX?

[@Bugagych]

​@@ayub_begimkulov REACT+MST+REACT QUERY+TYPESCRIPT. Вот хотелось бы что нибудь на таком стеке.

[@WebEnv]

@@ayub_begimkulov Хотелось бы сначала базовые понятия, как работают под капотом, как правильно работать с асихронностью, потом уже что продвинутее, по типу custom observables, lazy observables (если конечно будет инетерс у зрителей к этому). Думаю вообще в ютубе будешь одним из немногих, кто это тему поднимет. Понимаю, что у MobX нет популярности как у редакс, но может найдется отклик у тебя на канале, кому это нужно в работе.

[@fayster91]

@@ayub_begimkulov Еще хотелось бы узнать подробно про mobx-state-tree и mobx-keystone. Например опыта с mobx особо нет, однако когда начинаешь читать документацию и статьи, то натыкаешься на эти библиотеки и до конца не понятно, что они такого дают на практиче, чего нет у ванильного mobx

[@moneyandfame9748]

@@ayub_begimkulov оптимизация обзерверов с mobx. как пишут в документации, что их "мировозрение" отличается от того же redux, почему нужно разбивать все на более мелкие компонент и тд

[@sergey_c]

Спасибо большое за эти примеры с кодом! Помогло быстро понять суть редакса и отличий.

[@promoabys]

Классно, что обрисовал разницу в подходах. В остальном тоже всё интересно. Оценка по практике тоже всегда полезна и на мой взгляд крайне корректная ,) Супер, спасибо!!!

[@ayub_begimkulov]

Рад помочь!

[@biLLie_wiLLie]

34:35 Кэш менеджмент - это rtk query и react query? Они считаются стейт менеджерами на минималках для простых проектов? Используются вместе со стейт менеджерами?

[@paemox]

Redux Toolkit и MobX - для локальных состояний (тема, пользователь), RTK Query и React Query - для состояний на сервере (содержимое таблиц базы данных).

[@biLLie_wiLLie]

@@paemox можно хранить стейт на сервере?

[@paemox]

@@biLLie_wiLLie клиентское состояние лучше не хранить на сервере, но почти всегда есть база данных, котороя и является серверным состоянием (stateful server). Балансировщики нагрузки, сервера приложений - это сервера без состояния (stateless server).

[@grenadier4702]

@@paemox У тебя формулировки какие-то очень странные. Mobx/Редакс (toolkit + query) - это для глобального состояния, в котором хранятся какие-нибудь (серверные) данные

[@grenadier4702]

Mobx - для данных типа текущего юзера/темы/управления сложным ui. Context Api + swr/react-query - для всего остального. Каждую страницу, где нужны данные, оборачиваешь в контекст и прокидываешь необходимые данные

[@skv1991]

Хорошо все разложил, молодчина, спасибо тебе за качественный материал, структурированность и хорошую подачу 👍 Ну и звук отличный 👏

[@igor_ni]

Впал в транс, когда смотрел ролик. Очнулся в конце. 😄 Отличное изложение! Спасибо большое!

[@ayub_begimkulov]

Рад, что понравилось.

[@ВладиславСвидерский-г6й]

Айюб, большое спасибо! Интересно было узнать, как MobX и Redux работают под капотом. Хак с оптимизацией тудушек крутой👍

[@ayub_begimkulov]

Спасибо за фидбэк!

[@sharkman6434]

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

[@BlueCell]

Супер контент! Не заслуженно мало просмотров и сабов

[@ayub_begimkulov]

Спасибо за фидбэк! Думаю надо подачу улучшать - а остальное дело времени.

[@sanbuz]

Спасибо! очень помогло

[@romandeveloper7720]

Привет! А если redux toolkit использовали бы, то он бы не стал ререндерить весь лист при изменении одного айтема?( То есть тут они с mobx похожи, да? )

[@ayub_begimkulov]

В видео мы не использовали чистый редакс. Все примеры было на тулките. Так что тут он сильно не поможет.

[@romandeveloper7720]

@@ayub_begimkulov, странно.. А почему так. Тулкит ведь точечно тогл делает для отдельного элемента, то есть мутирует и проксями ловит. Нет же иммутабельности, из-за которой весь лист пересоздается. Или он под капотом иммутабельность эту делает подобно бойлерплейтному дефолтному редаксу?

[@alexandroppolus]

@@romandeveloper7720 тулкит использует библиотеку Immer. В редьюсере всё выглядит как мутабельное изменение объекта, но это ты меняешь черновик. Далее с помощью Immer по изменению черновика будет создан новый объект, с которым поступят по стандартным правилам Редукса - т.е. заменят старый объект на новый, причем так же и на всех уровнях выше. Тулкит нужен для некоторого удобства кодинга, но природа Редукса остается прежней.

[@iganza-p1p]

Спасибо за видео, отличный контент

[@ayub_begimkulov]

Не за что!

[@a4y_m5r]

Топовый видос, спасибо за труд! 👍

[@ayub_begimkulov]

Спасибо за фидбэк!

[@Qwqwqwqwqwq-rn7ny]

Привет. Есть в планах видео про recoilJS?

[@AlexanderPozhidaev]

mobx крутой) В редаксе как вариант еще в useSelector можно было передать вторым параметром функцию, которая бы контролировала ререндер

[@ayub_begimkulov]

Да, можно. Но в первом случае она бы не особо помогла, там в любом случае надо было бы весь лист перерендеривать.

[@Volodymyr-y1c]

Слушай, а подскажи пожалуйста, при мини-реализации mobx во время первого запуска autorun записываются все все проперти (для которых сработал get) и зависимости в deps map. Но что если есть некоторые зависимости внутри if'ов и при первом запуске autorun геттер на них не сработает. Будут ли тогда те свойства реактивны?

[@ayub_begimkulov]

Да, они станут реактивными, но только после того, как пройдет if внутри которого они лежат.

[@amina_tulips]

Спасибо большое!❤️

[@ayub_begimkulov]

Рад помочь!

[@TheTexPro]

Спасибо большое!

[@ayub_begimkulov]

Рад помочь!

[@fedordostoevskiy4209]

👍, но для меня redux простой был только на todo. Saga, middleware, таймеры всякие, вечные перерендеры. Я вешался просто вначале. 🤬🤯🥵 Везде пишут, что redux тупой, простой, но додумался только Абрамов, не Facebook даже с flusk!!!. Wtf ???

[@paemox]

Тоже самое, освоил "сложный" MobX, а "простой" Redux так и не смог.

[@ayub_begimkulov]

Есть такое. Но в любом случае, понять как работает Redux легко, а MobX для многих "магия". Ну и в целом с Redux все знакомятся еще во время изучения реакт. А так я согласен, что Mobx намного легче.

[@paemox]

@@ayub_begimkulov Redux не обязателен для React, там даже другая комманда разработчиков. Разве что отсталые курсы пихают его по привычке. React Query более актуален - в веб приложениях состояние хранитса в основном на сервере.

[@ayub_begimkulov]

​@@paemox Я вроде про обязательность redux вместе с react и не говорил) А у react-query же цель вообще другая. Это кеш менеджмент, а не глобальное хранилище стейта. Понятное дело, что есть много приложений, где можно redux полностью на react-query поменять, но это уже другой разговор же.

[@valentineserebreanu398]

прикольно, что подход разный, но у меня быо представление, что mobx как-то связан с rx js. и как бы прикольно, observable , но по сути , какая разница, когда тебе не приходится особо с этим работать? оно все под капотом делает, и визуально работает так же, как редакс. в принципе не очень понимаю зачем Mobx использовать, если у него размер больше, чем даже у тулкита, а у тулкита громадные возможности, встроенные плагины типа query и thunk и можно очень много чего с ним сделать. а с mobx тебе придется самим все писать?) причем useSelector работает похожим образом, он подписывается на обновления и если значение меняется стейта, только тогда он делает forceRender компонента, который использует useSelector

[@Pretzel318]

Блин, а у меня возник вопрос с туду листом и mobx, обязательно ли там создавать context.js? Я делала проект, где просто создавала store и просто в обернутом в observer компоненте дёргала нужный класс.. И теперь мне кажется, что я делала неправильно(

[@ayub_begimkulov]

Нет, можно и без контекста обойтись. Однако если использовать контекст, то будет проще тестировать, так как можно будет в контекст передавать фейковый стор с нужными данными.

[@роматарасов-о8л]

я наоборот думаю что новичку мобикс легче понять хочу узнать твоё мнение насчёт того какую вещь лучше использовать для загрузки данных с бека на redux(thunk vs createThunk vs RTK-query)

[@paemox]

RTK, MobX - для клиентских состояний, а для данных с бека лучше React Query.

[@grenadier4702]

Если не хочешь pain in the ass, то бери mobx для глобальных данных типа текущего юзера или для управления сложным ui, а для остального - контекст + swr/react-query

[@роматарасов-о8л]

мужики, вы недостаточно точно поняли вопрос. я сам на всех своих проектах имел стек mobx + react-query(с кайфом). но у меня на работе redux, я хочу узнать что круче для управления кешем и это внедрить(внедрение не бесплатно, поэтому надо сначала очень хорошо понять что лучше)

[@paemox]

​@@роматарасов-о8л по-моему лучше MobX и React Query сейчас не найти.

[@grenadier4702]

​@@роматарасов-о8л можешь оставить редакс для того, для чего он сейчас применяется и использовать конекст + react-query/swr для кеша. На своем проекте я использую swr

[@smartestbox]

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

[@raidenraiden7938]

Привет, спасибо за полезный контент

[@ayub_begimkulov]

Рад помочь!

[@vadimmarchenko3128]

Молодец

[@paemox]

А где ссылки на код?

[@ayub_begimkulov]

Добавил. Спасибо, что отписал.

[@UNRAYGAMESPRO]

интересно

[@СергейМельниченко-у8п]

Не писал фронт 4 года, появилась нужда в своем сайте, зашел сюда чтобы определиться с выбором стейт менеджера и у меня задница к креслу прилипла от такого колличества синтаксического сахара

[@vik_2743]

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

[@UghurAliyev]

а можно использовать в крупных проектах rtk query для запросов ? или лучше руками через axios все делать ? а так урок офигенный , как всегда ты лучший )

[@paemox]

Лучше React Query для запросов, RTK Query не всегда можно применить и напоминает Backbone.

[@AleksandrNeo]

@@paemox Привет. А почему нельзя его всегда применить?

[@iganza-p1p]

В RTQ нет infinite query

[@ayub_begimkulov]

можно конечно. но если привязки к redux нет - то лучше брать react-query (как уже отписали ниже).

[@viktorsavchenko2628]

А как же Effector или Zustand ? Уже давно появились стейт менеджеры намного мощнее этих двух.

[@ayub_begimkulov]

А почему ты считаешь, что они мощнее? Можешь раскрыть мысль? Чем редакс - вполне возможно. Это по сути его аналоги с небольшими изменениями/улучшениями. А MobX вообще же о другом. Мутабельность, прокси под капотом и соответсвенно меньше не нужных рендеров и вычислений. Как по мне, это немного разные вещи. И у MobX особо сейчас не вижу конкурентов.

[@stanislavs3513]

лайк однозначно

[@ayub_begimkulov]

Спасибо!

[@sergeyfrantsev4449]

ты лучший!)

[@ayub_begimkulov]

Спасибо!

[@alcor9921]

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

[@ayub_begimkulov]

Спасибо за фидбэк! Попробую в темной снять, посмотрим, как получится. Но так вообще у меня и барузер в белой, так что тут одинаково все равно везде не будет.

[@ev_geniy17]

Zustand

[@paemox]

Zustand выглядит проще чем Redux Toolkit, но MobX еще проще. Непонятно зачем вообще нужен Zustand и какие у него преимущества.

[@ev_geniy17]

@@paemox да я просто так написал когда увидел, что у него за неделю миллион установок как и мобх. А так да пробовал и то и то, мне тоже кажется мобх проще, плюс если сложная бизнес логика можно в ооп писать.

[@paemox]

@@ev_geniy17 Непонятна популярность Zustand, MobX лучше его во всем, кроме размера библиотеки, но кому нужны диалапщики?

[@paemox]

Zustand - это Redux Toolkit здорового человека.

[@artyomtaranenko2267]

После перехода на rtk, я полюбил редакс ещё сильнее, там уже нет никакого бойлерплейта (возможно моего опыта мало, что бы судить объективно), большое кол-во необходимых фитч есть под капотом. Всё никак не доберусь до zustand, хотя ещё помню, что бы jotai, но как всегда отмазки - время, работа и тд (

[@paemox]

Не бойлерплейта только в MobX, а во всех твоих библиотеках есть в некой мере, Redux, RTK - больше, другие - меньше.

[@airpodsclub6443]

zustand более лаконичнее смотрится конечно чем редакс или мобх, я думаю он скоро должен вытеснять их

[@artyomtaranenko2267]

Далеко не скоро, будет куча проектов, которые нужно будет поддерживать. Жикури и пхп до сих пор живут

[@paemox]

MobX - лаконичнее Zustand, в нем ООП и мутабельность состояния из коробки. В Zustand всего лишь чуть меньше boilerplate чем в Redux.

[@ayub_begimkulov]

Вижу под видео очень много подобны комментов. Но тут нужно учитывать, что подходы работы со стейтом у zustand/redux другие по сравнению с mobx. zustand - это по сути улучшенный redux. Если глянешь в исходники (github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L100) там такой же стор считай создается, как и в redux. А MobX на прокси основан, то есть каждый компонент понимает, на какой именно части стейта он завязан. Соответственно лишней работы вообще не будет. Ну и в целом работа со стор немного другая с точки зрения DX. Пока у MobX я прям не вижу конкурентов, однако хотелось бы.

[@paemox]

@@ayub_begimkulov У MobX конкурент - valtio.

[@TheTexPro]

@@ayub_begimkulov MobX - он такой один)

[@tomitomion1179]

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

[@ayub_begimkulov]

Привет. Не уделил внимания в видео этому моменту. Реакция - это функция (callback переданный в autoRun). Она будет вызываться тогда, когда поменяются реактивные значения, используемые внутри нее. Вот наглядный пример: ```ts const state = observable({ a: 5, b: 'test' }); // функция-колбэк будет реакцией autoRun(() => { console.log(state.b); }); ```

[@paemox]

Реакции - это функции-обработчики изминения состояния хранилища.

[@tigranavushian2706]

effector !

[@ayub_begimkulov]

Effector скорее redux'у конкурент.

[@Умарбек-Махмадиев]

zustand лучше

[@oldiBerezko_]

Чём?

[@АлександрКос-р3щ]

зачем так тараторить?

[@ayub_begimkulov]

в новых видео речь должна лучше быть)