MOBX ПРОТИВ REDUX | РАЗБИРАЕМСЯ ЧТО ЛУЧШЕ
HTML-код
- Опубликовано: 16 июн 2024
- В данном видео разберем разницу между двумя популярными библиотеками для 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 - Заключение
Хорошо все разложил, молодчина, спасибо тебе за качественный материал, структурированность и хорошую подачу 👍 Ну и звук отличный 👏
Классно, что обрисовал разницу в подходах. В остальном тоже всё интересно. Оценка по практике тоже всегда полезна и на мой взгляд крайне корректная ,)
Супер, спасибо!!!
Рад помочь!
Спасибо за видео. Если будет интересно - сделай пожалуйста примеры архитектурных решений MobX и их сравнение
Спасибо большое за эти примеры с кодом! Помогло быстро понять суть редакса и отличий.
Можно больше про МобХ, уж очень мало про него информации на Ютуб. Спасибо за материал!
Привет. Спасибо за фидбэк! А что конкретно хочешь увидеть по MobX?
@@ayub_begimkulov REACT+MST+REACT QUERY+TYPESCRIPT. Вот хотелось бы что нибудь на таком стеке.
@@ayub_begimkulov Хотелось бы сначала базовые понятия, как работают под капотом, как правильно работать с асихронностью, потом уже что продвинутее, по типу custom observables, lazy observables (если конечно будет инетерс у зрителей к этому). Думаю вообще в ютубе будешь одним из немногих, кто это тему поднимет. Понимаю, что у MobX нет популярности как у редакс, но может найдется отклик у тебя на канале, кому это нужно в работе.
@@ayub_begimkulov Еще хотелось бы узнать подробно про mobx-state-tree и mobx-keystone. Например опыта с mobx особо нет, однако когда начинаешь читать документацию и статьи, то натыкаешься на эти библиотеки и до конца не понятно, что они такого дают на практиче, чего нет у ванильного mobx
@@ayub_begimkulov оптимизация обзерверов с mobx. как пишут в документации, что их "мировозрение" отличается от того же redux, почему нужно разбивать все на более мелкие компонент и тд
Впал в транс, когда смотрел ролик. Очнулся в конце. 😄 Отличное изложение! Спасибо большое!
Рад, что понравилось.
Топовый видос, спасибо за труд! 👍
Спасибо за фидбэк!
Супер контент! Не заслуженно мало просмотров и сабов
Спасибо за фидбэк!
Думаю надо подачу улучшать - а остальное дело времени.
Спасибо за видео, отличный контент
Не за что!
Айюб, большое спасибо!
Интересно было узнать, как MobX и Redux работают под капотом.
Хак с оптимизацией тудушек крутой👍
Спасибо за фидбэк!
Спасибо! очень помогло
Спасибо большое!
Рад помочь!
Спасибо огромное, расскажи пожалуйста про кеш менеджмент в частности про rtk query, интересует кейс когда получаешь массив объектов с бд , как его поля изменять и опять записать в бд ( пока только думаю закидывать в массив стейта, от туда мапить в компоненте фильтруя по айдишнику и метать опять в стейт чтоб потом закинуть на сервак, получается дичь, уроки в основном по примитивным тудушкам одностроковым везде а как объекты менять не показывают )
Айюб, очень хотелось бы увидеть небольшой разбор реального проекта на базе React, чтобы понимать, как там все взаимодействует и примерный уровень вхождения для джунов. А то вроде думаешь, что идешь по нужному пути, но все равно есть сомнения в правильности или достаточности знаний
Привет. Есть в планах видео про recoilJS?
Молодец
mobx крутой)
В редаксе как вариант еще в useSelector можно было передать вторым параметром функцию, которая бы контролировала ререндер
Да, можно. Но в первом случае она бы не особо помогла, там в любом случае надо было бы весь лист перерендеривать.
34:35 Кэш менеджмент - это rtk query и react query? Они считаются стейт менеджерами на минималках для простых проектов? Используются вместе со стейт менеджерами?
Redux Toolkit и MobX - для локальных состояний (тема, пользователь), RTK Query и React Query - для состояний на сервере (содержимое таблиц базы данных).
@@paemox можно хранить стейт на сервере?
@@biLLie_wiLLie клиентское состояние лучше не хранить на сервере, но почти всегда есть база данных, котороя и является серверным состоянием (stateful server). Балансировщики нагрузки, сервера приложений - это сервера без состояния (stateless server).
@@paemox У тебя формулировки какие-то очень странные. Mobx/Редакс (toolkit + query) - это для глобального состояния, в котором хранятся какие-нибудь (серверные) данные
Mobx - для данных типа текущего юзера/темы/управления сложным ui. Context Api + swr/react-query - для всего остального. Каждую страницу, где нужны данные, оборачиваешь в контекст и прокидываешь необходимые данные
Спасибо большое!❤️
Рад помочь!
Слушай, а подскажи пожалуйста, при мини-реализации mobx во время первого запуска autorun записываются все все проперти (для которых сработал get) и зависимости в deps map. Но что если есть некоторые зависимости внутри if'ов и при первом запуске autorun геттер на них не сработает. Будут ли тогда те свойства реактивны?
Да, они станут реактивными, но только после того, как пройдет if внутри которого они лежат.
Привет, спасибо за полезный контент
Рад помочь!
Привет!
А если redux toolkit использовали бы, то он бы не стал ререндерить весь лист при изменении одного айтема?( То есть тут они с mobx похожи, да? )
В видео мы не использовали чистый редакс. Все примеры было на тулките. Так что тут он сильно не поможет.
@@ayub_begimkulov, странно.. А почему так. Тулкит ведь точечно тогл делает для отдельного элемента, то есть мутирует и проксями ловит. Нет же иммутабельности, из-за которой весь лист пересоздается. Или он под капотом иммутабельность эту делает подобно бойлерплейтному дефолтному редаксу?
@@romandeveloper7720 тулкит использует библиотеку Immer. В редьюсере всё выглядит как мутабельное изменение объекта, но это ты меняешь черновик. Далее с помощью Immer по изменению черновика будет создан новый объект, с которым поступят по стандартным правилам Редукса - т.е. заменят старый объект на новый, причем так же и на всех уровнях выше. Тулкит нужен для некоторого удобства кодинга, но природа Редукса остается прежней.
👍, но для меня redux простой был только на todo. Saga, middleware, таймеры всякие, вечные перерендеры. Я вешался просто вначале. 🤬🤯🥵
Везде пишут, что redux тупой, простой, но додумался только Абрамов, не Facebook даже с flusk!!!. Wtf ???
Тоже самое, освоил "сложный" MobX, а "простой" Redux так и не смог.
Есть такое. Но в любом случае, понять как работает Redux легко, а MobX для многих "магия". Ну и в целом с Redux все знакомятся еще во время изучения реакт.
А так я согласен, что Mobx намного легче.
@@ayub_begimkulov Redux не обязателен для React, там даже другая комманда разработчиков. Разве что отсталые курсы пихают его по привычке. React Query более актуален - в веб приложениях состояние хранитса в основном на сервере.
@@paemox Я вроде про обязательность redux вместе с react и не говорил)
А у react-query же цель вообще другая. Это кеш менеджмент, а не глобальное хранилище стейта.
Понятное дело, что есть много приложений, где можно redux полностью на react-query поменять, но это уже другой разговор же.
прикольно, что подход разный, но у меня быо представление, что mobx как-то связан с rx js. и как бы прикольно, observable , но по сути , какая разница, когда тебе не приходится особо с этим работать? оно все под капотом делает, и визуально работает так же, как редакс. в принципе не очень понимаю зачем Mobx использовать, если у него размер больше, чем даже у тулкита, а у тулкита громадные возможности, встроенные плагины типа query и thunk и можно очень много чего с ним сделать. а с mobx тебе придется самим все писать?) причем useSelector работает похожим образом, он подписывается на обновления и если значение меняется стейта, только тогда он делает forceRender компонента, который использует useSelector
Не писал фронт 4 года, появилась нужда в своем сайте, зашел сюда чтобы определиться с выбором стейт менеджера и у меня задница к креслу прилипла от такого колличества синтаксического сахара
да напиши всю приложуху в одном файле на простой ваниле, сдай проект, получи деньги и забей. ну что как маленький
Спасибо за труд! Было бы неплохо, если б презентация была в темной теме, глазам больно. Хотя тут кому как наверное, но редактор кода же в темной теме, неплохо было бы придерживаться одной темы
Спасибо за фидбэк! Попробую в темной снять, посмотрим, как получится.
Но так вообще у меня и барузер в белой, так что тут одинаково все равно везде не будет.
Блин, а у меня возник вопрос с туду листом и mobx, обязательно ли там создавать context.js? Я делала проект, где просто создавала store и просто в обернутом в observer компоненте дёргала нужный класс.. И теперь мне кажется, что я делала неправильно(
Нет, можно и без контекста обойтись. Однако если использовать контекст, то будет проще тестировать, так как можно будет в контекст передавать фейковый стор с нужными данными.
лайк однозначно
Спасибо!
я наоборот думаю что новичку мобикс легче понять
хочу узнать твоё мнение насчёт того какую вещь лучше использовать для загрузки данных с бека на redux(thunk vs createThunk vs RTK-query)
RTK, MobX - для клиентских состояний, а для данных с бека лучше React Query.
Если не хочешь pain in the ass, то бери mobx для глобальных данных типа текущего юзера или для управления сложным ui, а для остального - контекст + swr/react-query
мужики, вы недостаточно точно поняли вопрос.
я сам на всех своих проектах имел стек mobx + react-query(с кайфом).
но у меня на работе redux, я хочу узнать что круче для управления кешем и это внедрить(внедрение не бесплатно, поэтому надо сначала очень хорошо понять что лучше)
@@user-dw8lb8lc7u по-моему лучше MobX и React Query сейчас не найти.
@@user-dw8lb8lc7u можешь оставить редакс для того, для чего он сейчас применяется и использовать конекст + react-query/swr для кеша. На своем проекте я использую swr
Zustand
Zustand выглядит проще чем Redux Toolkit, но MobX еще проще. Непонятно зачем вообще нужен Zustand и какие у него преимущества.
@@paemox да я просто так написал когда увидел, что у него за неделю миллион установок как и мобх. А так да пробовал и то и то, мне тоже кажется мобх проще, плюс если сложная бизнес логика можно в ооп писать.
@@ev_geniy17 Непонятна популярность Zustand, MobX лучше его во всем, кроме размера библиотеки, но кому нужны диалапщики?
Zustand - это Redux Toolkit здорового человека.
ты лучший!)
Спасибо!
а можно использовать в крупных проектах rtk query для запросов
? или лучше руками через axios все делать ? а так урок офигенный , как всегда ты лучший )
Лучше React Query для запросов, RTK Query не всегда можно применить и напоминает Backbone.
@@paemox Привет. А почему нельзя его всегда применить?
В RTQ нет infinite query
можно конечно. но если привязки к redux нет - то лучше брать react-query (как уже отписали ниже).
А как же Effector или Zustand ? Уже давно появились стейт менеджеры намного мощнее этих двух.
А почему ты считаешь, что они мощнее? Можешь раскрыть мысль?
Чем редакс - вполне возможно. Это по сути его аналоги с небольшими изменениями/улучшениями.
А MobX вообще же о другом. Мутабельность, прокси под капотом и соответсвенно меньше не нужных рендеров и вычислений.
Как по мне, это немного разные вещи. И у MobX особо сейчас не вижу конкурентов.
А где ссылки на код?
Добавил. Спасибо, что отписал.
effector !
Effector скорее redux'у конкурент.
После перехода на rtk, я полюбил редакс ещё сильнее, там уже нет никакого бойлерплейта (возможно моего опыта мало, что бы судить объективно), большое кол-во необходимых фитч есть под капотом. Всё никак не доберусь до zustand, хотя ещё помню, что бы jotai, но как всегда отмазки - время, работа и тд (
Не бойлерплейта только в MobX, а во всех твоих библиотеках есть в некой мере, Redux, RTK - больше, другие - меньше.
zustand более лаконичнее смотрится конечно чем редакс или мобх, я думаю он скоро должен вытеснять их
Далеко не скоро, будет куча проектов, которые нужно будет поддерживать. Жикури и пхп до сих пор живут
MobX - лаконичнее Zustand, в нем ООП и мутабельность состояния из коробки. В Zustand всего лишь чуть меньше boilerplate чем в Redux.
Вижу под видео очень много подобны комментов. Но тут нужно учитывать, что подходы работы со стейтом у zustand/redux другие по сравнению с mobx.
zustand - это по сути улучшенный redux. Если глянешь в исходники (github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L100) там такой же стор считай создается, как и в redux.
А MobX на прокси основан, то есть каждый компонент понимает, на какой именно части стейта он завязан. Соответственно лишней работы вообще не будет. Ну и в целом работа со стор немного другая с точки зрения DX.
Пока у MobX я прям не вижу конкурентов, однако хотелось бы.
@@ayub_begimkulov У MobX конкурент - valtio.
@@ayub_begimkulov MobX - он такой один)
"все реактивные значения должны использоваться внутри реакции" ну да, наверно. Ты о чем вообще, че за реакция?
Привет. Не уделил внимания в видео этому моменту.
Реакция - это функция (callback переданный в autoRun). Она будет вызываться тогда, когда поменяются реактивные значения, используемые внутри нее.
Вот наглядный пример:
```ts
const state = observable({ a: 5, b: 'test' });
// функция-колбэк будет реакцией
autoRun(() => {
console.log(state.b);
});
```
Реакции - это функции-обработчики изминения состояния хранилища.
зачем так тараторить?
в новых видео речь должна лучше быть)