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

Рет қаралды 10,101

Күн бұрын

В данном видео разберем разницу между двумя популярными библиотеками для state managment - redux и mobx. Поговорим про то, как они работают под капотом, какая разница между ними и что лично я бы вам рекомендовал.
Ссылка на код:
github.com/Ayub-Begimkulov/yo...
Ссылка на Telegram:
telegram.me/ayub_begimkulov_c...
Видео про контекст:
• ПОЛНОЦЕННЫЙ ГАЙД ПО RE...
Видео про топ ошибок в redux toolkit:
• ТОП 6 ОШИБОК ПРИ РАБОТ...
Таймкоды:
00:00-00:40 - Интро
00:40-01:40 - Что нужно знать, для понимания этого урока
01:40-04:19 - Как работает mobx
04:19-11:15 - Мини реализация mobx
11:15-12:30 - Как работает redux
12:30-14:15 - Мини реализация redux
14:15-16:15 - Говорим про размер библиотек
16:15-22:09 - Рассматриваем пример с MobX
22:09-25:34 - Рассматриваем пример с Redux
25:34-28:16 - Исправляем формат данных Redux
28:16-32:33 - Плюсы и минусы каждой из библиотек
32:33-34:55 - Говорю про мой личный опыт.
34:55-35:23 - Заключение

Пікірлер: 114

@promoabys Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад помочь!

@skv1991 6 ай бұрын

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

@sergey_c 4 ай бұрын

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

@Vitlsa 9 ай бұрын

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

@a4y_m5r Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@user-np5to9ug4w Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Не за что!

@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, почему нужно разбивать все на более мелкие компонент и тд

@igor_ni Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@sanbuz Ай бұрын

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

@user-eb5yw9ui6o Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@BlueCell Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@TheTexPro Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад помочь!

@sharkman6434 Жыл бұрын

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

@amina_tulips Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад помочь!

@Qwqwqwqwqwq-rn7ny 10 ай бұрын

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

@vadimmarchenko3128 8 ай бұрын

Молодец

@user-wm8dc8rw8r Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@smartestbox Жыл бұрын

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

@raidenraiden7938 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Рад помочь!

@stanislavs3513 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо!

@AlexanderPozhidaev Жыл бұрын

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

@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 - для всего остального. Каждую страницу, где нужны данные, оборачиваешь в контекст и прокидываешь необходимые данные

@Pretzel318 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@romandeveloper7720 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@romandeveloper7720 Жыл бұрын

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

@alexandroppolus Жыл бұрын

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

@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 5 ай бұрын

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

@sergeyfrantsev4449 10 ай бұрын

ты лучший!)

@ayub_begimkulov 10 ай бұрын

Спасибо!

@alcor9921 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@paemox Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@user-dw8lb8lc7u Жыл бұрын

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

@paemox Жыл бұрын

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

@grenadier4702 Жыл бұрын

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

@user-dw8lb8lc7u Жыл бұрын

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

@paemox Жыл бұрын

@@user-dw8lb8lc7u по-моему лучше MobX и React Query сейчас не найти.

@grenadier4702 Жыл бұрын

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

@viktorsavchenko2628 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

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

@user-qi6vq3gb9s 5 ай бұрын

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

@vik_2743 4 ай бұрын

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

@UghurAliyev Жыл бұрын

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

@paemox Жыл бұрын

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

@DoSmth Жыл бұрын

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

@user-np5to9ug4w Жыл бұрын

В RTQ нет infinite query

@ayub_begimkulov 10 ай бұрын

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

@ev_geniy17 Жыл бұрын

Zustand

@paemox Жыл бұрын

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

@ev_geniy17 Жыл бұрын

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

@paemox Жыл бұрын

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

@paemox Жыл бұрын

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

@tigranavushian2706 Жыл бұрын

effector !

@ayub_begimkulov Жыл бұрын

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

@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 Жыл бұрын

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