Mobx & React Полный курс 2021
HTML-код
- Опубликовано: 26 сен 2024
- В этом уроке мы рассмотрим все возможности state менеджера Mobx в связке с React. Сравним MobX и Redux и подведем итоги
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/fron...
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n...
Яндекс деньги - yoomoney.ru/to...
После редакса, мобХ настолько приятно смотрится, что глаз радует))) Спасибо)
согласен
Жаль, что мало годных видео по MobX на русском
А если тулкит редакс?
@@ВладиславБаурин-й4я та же шляпа)
На новом проекте работаю с mobx. И он действительно потрясающий. Редакс даже рядом не стоял. Настолько он архаичный и неудобный.
Отличное разъяснение, быстро и без воды. А то другие любят курс из 10 видео по 25 минут делать. Спасибо
У меня все видео без воды) Спасибо вам!
Не ну тут и 1000 лайков поставить не жалко, нет норм гайдов по мобх, а тут прям все как надо, спасибо автору!!
Спасибо большое, рад что полезно!)
На канале codeBurger сейчас толковый курс выходит.
Жаль что месяц назад когда я во всё это самолично вникал небыло хороших видео, здорово бы сократило время!
Спасибо за видео!
@@StepanVorobiov спасибо !))
сначала офигел от названия и продолжительности видео, но реально круто и все понятно.Странно что у тебя еще до сих пор только 2к подписчиков
Потихоньку растем!) С вашей поддержкой! Спасибо
200k D:
213)))
@@UlbiTV 304k держу в курсе
Кратко, лаконично, но при этом суть раскрыта в полной мере! Лайк!
рад, что случайно наткнулся на этот канал)
Спасибо друг, а я рад что тебе полезно!)
После redux, redux-thunk и redux-saga это все так легко понимается. Аш порадовался) спасибо.
Спасибо за видео. В очередной раз поражаюсь твоему таланту объяснять всё кратко и понятно.
Блин, все же ты красава! Никаких тебе "любая технология" за час)) зачем за час, когда и за 10 минут можно рассказать)) Лайк до просмотра и погнал видос смотреть!
Хеех, спасибо дружище) Тут при желании и это видео на час растянуть можно, только вот зачем, если можно кратенько и по факту!)
@@UlbiTV конечно! Ведь главное врубиться в технологию в общем, понять как в целом она работает, а углубляться уж сами как нибудь, на практике!) в общем спасибо за видос, у тебя они все в тему и все ооочень полезные!
@@kolyabokov88 Еще раз спасибо)
Тоже считаю.такие видео крайне полезными , для учебы все эти видосы на час не подходят потому что нужно быстро глянуть то что забыл и пилить дальше, получается шикарный формат, забыл, посмотрел , вспомнил/понял/переосмыслил и погнал работать.
@@UlbiTV вопрос конечно запоздалый, но лично твоё мнение на счет того что лучше использовать Redux или MobX? Слышал твои слова в конце видео, но всё же прошел год и мнение могло поменяться)
Только добрался глянуть видос, блин, я только разобрался с базовыми функциями редакса, а тут такая подстава- теперь учить еще и мобх... Засада:)))))) а если серьезно, то впервые о нем услышал, но походу действительно проще выглядит. Спасибо!!!
Спасибо за отзыв!)) лучше добей уже редакс, когда почувствуешь что обуздал его, возвращайся сюда!)
@@UlbiTV да я так, пошутил просто, я на мобх пока даже не смотрю, глянул видео скорее для общего кругозора:)))
Спасибо за видео! Как раз переход на MobX уже не кажется чем-то безумно сложным! Спасибо за разъяснения!
Успехов! и спасибо)
Кратко и лаконично как всегда, спасибо за полезные туториалы
Благодарю!)
Спасибо большое. Всегда проходил мимо него. Сейчас попробовал и понял, что он очень крут. По крайней мере для начинающих это выглядит явно проще, нежели дебри редакса. Спасибо за ролик.
От одного видео, к другому. Всё очень понятно и полезно. Раньше смотрел видео и понимал только часть, а теперь смотрю видео и понимаю всё. Спасибо тебе огромное, за твой труд.
Ооо mobx, если еще про тайпскрипт что то подобное сделаешь, вообще цены не будет, лайк комент все как обычно. П. С. В конце с мк смешно вышло
Спасибо, в дальнейшем будет про тс что то возможно
Огромнейшее спасибо за видео. Ты помогаешь мне реализовывать мою цель - быть разработчиком!
Хорошее объяснение. Без воды. Подписка, лайк.
На канале много интересного!) Спасибо!)
Теперь я знаю Mobx, оказалась простая штука, спасибо)
Чувак просто легенда. Достоин миллиона подписчиков
Лучшие уроки по JavaScript
Ого! Я тут на пару недель выпал, а ты уже столько видео наделал. Супер.
Правда не понятно когда смогу посмотреть :(
Как минутка будет, жду твоего просмотра и отзыва!)
Оууууууу щит. Это лучше что я видел по mobx. Спасибо
Спасибо большое, очень круто и никакой воды. Подписалась. Жду новых роликов)
Велком на остальные видосы!) Спасибо вам!)
Лучший, кратко, полно, информативно, спасибо!)
Спасибо!)
Всего за 12 минут, понятно и по делу. Большое тебе спасибо и лайк.
Было бы интересно посмотреть видеоролик в связке Typescript + React (также с функциональными компонентами) + Mobx про простой TodoList.
Если будет время, guide по структуре вложенных папок и файлов (typescript + react + mobx)
Спасибо!) До тайпскрипта руки никак не дойдут, но в планах!)
@@UlbiTV Если будет можешь сказать, ты внутри класса Todo реализуешь как методы такие HandleClick, RemoveClick, а я сделал стрелочные функции.
handleClick = (id) => {
this.todos = this.todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed
}
return todo
})
}
addHandler = (title) => {
this.todos.push({id: Date.now(), title: title, completed: false})
}
removeHandler = (id) => {
this.todos = this.todos.filter(todo => todo.id !== id)
}
Правильный ли этот код, и можно ли этот код сократить ?
Хотя вроде без проблем работает, а то в React есть такие понятия как мутация state
@@dossh429 Да все ок!!) В mobx можно изменять обьекты, в редакс и реакте же состояние является неизменяемым, и надо каждый раз новый обьект передавать
Коротко и по теме, от души спасибо!
Прекрасно объяснил! Тема реально актуальна. Спасибо
Cпасибо, друг!)
Кратко, по сути, с хоршими примерами.. Спасибо
Жаль нельзя поставить больше одного лайка! Спасибо за видео! :-)
Cпасибо, теска!)
Благодарю за простое обьяснение Mobx! Всегда тебя приятно слушать!
У тебя охренительные видео! Я почти всему научился благодаря тебе!
Автор, вы большой молодец. Спасибо!
Спасибо! Очень доступно и понятно!!! Успехов в развитии канала!
Лучший!! Нашел твой канал 2 дня назад и я просто удивлен количеством годного контента!! За такое и патрон оформить не жалко. Спасибо!!
Огонь, всё доступно и понятно, спасибо )
Спасибо дружише)
Кратко, четко, информативно. В твоем стиле, в общем ) Спасибо! Идем дальше
На мой взгляд, так использовать обёртку красивее:
. . .
*export default observer(Counter);*
Согласен)
Спасибо, очень кратко и понятно
очень информативно, спасибо)
Рад стараться!)
Спасибо, как всегда понятно и доходчиво)
Благодарочка)
После редакса действительно, как бальзам на душу
Просто огонь! Все четко, понятно, и по существу! Благодарю!)
Ох блин! Не каких тебе долбаных санков\танков, саги и прочей лабуды! крутяк!
Мне тех.лид сказал, что redux плох тем, что создает постоянно новый стейт, а это чревато тем, что на больших проектах где у вас стейт размером с город оптимизация летит к черту. У Mobx же просто меняется какие-то отдельные поля стейта и все ок.
Спасибо тебе, автор, очень крутое объяснение !
Спасибо ты сделал выбор в новом проекте за меня!
Хеех) круто!)
Интересно и познавательно,спасибо !
Огромное спасибо за такой полезный контент
Спасибо вам за поддержку!
Красавчик! Лучшее
Всегда приятно смотреть твои видео уроки.
cпасибо бро за контент
Спасибо! Классный ролик.
Спасибо, как всегда понятно и доходчиво
Спасибо за отзыв!)
Видео короткое и содержательное. Спасибо!
Доступно и понятно все! Спасибо!!
Спасибо) Урок достойный
Спасибо друг!
6:15 ох уж эти вьюшные привычки )
"Дополнительной обработки для асинхронных экшенов не надо"...
Надо!
А то будете ловить ошибки типа: [MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed.
У автора такая же.
Однако вцелом видео полезное. Спасибо!
Зачем использовать map/filter и создавать новый объект, если в мобх ты можешь мутировать? зачем лишний раз давать работу gc? Создал 1 раз объект и развлекайся с ним.
+ ты делая complete: true, пересоздаешь массив todo. Реакт перерендерит компонент со списком(сами элементы не будут ререндериться благодаря key)
Какой он простой, оказывается. Буду пользоваться, спасибо за ролик
кратко, емко, полезно! спасибо!
Старался, спасибо вам!
благодарю ещё раз за все твои видео!
Спасибо за труд!
Всё что надо для старта. Спасибо!
Спасибо за уроки мужик
Это и все??? Я работал с Redux 5 лет, сейчас зашел на проект с MobX. Да, это небо и земля) Я думал потрачу пару часов только на понимание сути. А тут 12 минут на 1.5 скорости и можно в работу
Пойду пробовать, автору, как всегда, огромное спасибо за супер контент
11:00 это было самое крутое объяснение для чего нужен redux thunk и redux saga )
Your tutorials always was useful. Thanks so much and good luck !
Wy Super, Timur. Wsyo genialnoye prosto - eto pro Was
Мда думал сложная в понимании технология типо редакса. А тут всё понятно :/. Нахрена мне тогда этот редакс для своих проектов, если есть это чудо. За ролик спасибо, очень годно, теперь точно буду интересоваться в следующий раз, когда будут обсуждать какую то новую технологию)))
Даааа, мобХ гораздо проще для понимания) Спасибо!
@@UlbiTV спасибо тебе, я благодаря тебе узнал за месяц больше, чем узнавал за год
круто, легко и понятно
спасибо большое! хорошее видео
Коротко и понятно то что нужно 👍
spasibo. Otlichni urok
смотрю, смеюсь и плачу после редакса
:d понимаю
супер спасиба
Видео как всегда супер, перешел на него с другого видео автора про node, react и mobx. Очень советую. ruclips.net/video/H2GCkRF9eko/видео.html
Про что идет речь на 5:05
completeTodo(todo) {
todo.completed = !todo.completed;
}
Сразу для тех кто будет орать "это и так понятно". Нет, не понятно когда ты только учишься.
Первый вопрос который возник при просмотре: _а зачем тогда Redux-бубен и танцы с Action, Dispatch, Thunk, Saga?.._
лучший бро
Спасибо бро!)
Классно и лаконично объясняешь. А mobx довольно простой по сравнению с редакс. Все эти санки, саги, мидлвейры ... (((
Спасибо за материал Улби!
Short and descriptive.
Thanks Timur
Случилось непонятное. Написал в точности как на 1:45, но выскочила ошибка - в экспортируемом объекте this у меня undefined, контекст потерян. Побился некоторое время, в результате переписал методы класса на стрелочные, чтобы не биндить, и всё заработало. Вопрос: а как оно у автора-то работало? )
У меня все работает, повторял в точности как и было в видео, возможно где-то опечатался или что-то не дописал ( я так не заметил, что в экспорт по дефолту передается 'new Counter()' )
Спс за видео! Если не трудно, то интересно было бы еще узнать кое-что про RxJS, просто ради интереса.. Если я правильно понимаю, то оба SM используют тот-же паттерн observer, только MobX кажется куда как проще.
как всегда самая годнота - контент)
5:00 this.todos.map(todo => ...) для изменения все таки не очень хороший вариант. все же думаю, более правильно делать this.todos.find().completed = value
Легенда !)
Привет, спасибо за видео! Хотел уточнить кое-что, при асинхронной модификации стора в консоли появляется предупреждение " Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ProductsStore@2._loading". Подумал что что-то делаю не так, полез в доку, ничего там подобного не нашел, пошел к тебе смотреть заново, и вижу что у тебя такое же предупреждение. Я так понимаю это не критично? Меня на собесе за это не отругают?
Начал писать бинд кей на 6:19))
😂😂😂 Привычка победила)) вот ты внимательный
хех) я тож заметил. на самом деле очень хороший видос) коротко о главном)
Это вообще бомба особенно после redux saga ))))
Отличный ролик. Спасибо.
коротко и по сути, а дальше все по традиции.. ну и спасибо )
mobx-react-lite поддерживает функциональные компоненты, mobx-react поддерживает и функциональные, и классовые. Если у вас стоит mobx-react, то нет смысла подключать ещё и mobx-react-lite
Спасибо!
Действительно, mobx кажется гораздо проще
Откровенно плохо. Рассмотрели только самые базовые вещи. Этого больше чем на todos не хватит.
1. Приведите пример экшена, где происходит фетч, затем обработка, затем присвоение. Тогда возникнет понимание, зачем runInAction.
2. Импорт стора напрямую - явно не лучший кейс. Показали бы хотя бы как его сверху протаскивать.
Спасибо за отзыв!)
Если не сложно, поясните - почему плохо напрямую импортировать стор, и как делать правильно?
Спасибо! Полезно очень!
Огромное спасибо, за Ваш труд. Очень помогаете на новом проекте!! Подскажите, если основная задача отрисовка данных с бэка, есть формы отправки заявки и небольшая настройка тарифных планов, типо чекбоксы с доп. услугами. На данном этапе я справляюсь с помощью хуков, как думаете, нужен ли стейт менеджер, думал про mobX, первый проект на next.js.
Понравилось все кроме слова "компонента"
Полный курс Redux: 5 частей, каждая по 3 часа
Полный курс по Mobx: 11 минут😂