Шикарное видео, для вводного понимания MobX. Единственный момент, лучше не вкладывать тернарные операторы друг в друга, когда этим злоупотребляют, то потом такой код больно "раскручивать" и сопровождать.
Спасибо!) По поводу sort в mobx документации написано так: Unlike the built-in implementation of the functions sort and reverse, observableArray.sort and reverse will not change the array in-place, but only will return a sorted / reversed copy. From MobX 5 and higher this will show a warning. It is recommended to use array.slice().sort() instead.
@@user-bc2nc5lt5p так нужно же было only return a sorted copy, для этого slice не нужен) upd: был не прав. Попробовал без slice, работает правильно, но предупреждениями сыпит в консоль не останавливаясь, проще уже оставить.
Привет! А ты знаешь, чем плохо объявлять стрелочные функции в рендере? Ты же людям знания несешь. И концепция редакса с неизменяемыми данными совсем не вяжется с концепцией мобикса. Для чего переменная вообще не понятно.
Артём, спасибо! Хотелось бы найти обоснование необходимости (полезности) замены setState (или хуков) на MobX. Можете привести ссылочку на статью на эту тему? Для вас этот выбор очевиден, на сколько я понял.
Необходимость замены setState на глобальное состояние(например redux, mobx, effector, react context и др) стоит в том случае, если данные состояния в вашем приложении используются повсеместно, т.е. не на одной странице или в одном компоненте. Например в реальных приложениях на реактивных фреймворках(или любых других инструментах для создания реактивных приложений, напр. Flutter) в 100% случаев в глобальное состояние выносятся данные авторизации пользователя, т.к. зачастую для приложений с авторизацией требуются отдельная проверка доступности перехода на ту или иную страницу приложения в зависимости от статуса авторизации пользователя. Ну и просто это удобно, когда есть один источник состояния и его "правдивости". В то же время никогда в глобально состояние не стоит выносить данные, которые требуются для рендера одной страницы, например страница "видео" на TH-cam, она рендерится единожды, соответственно при получении данных с сервера (Rest API).
@@user-bc2nc5lt5p Ага понятно. Я использую компонент верхнего уровня (обычно он называется App) для хранения глобальных состояний и передаю остальным компонентам методы обновления состояний через props.
@@user-bc2nc5lt5p скачал код, запустил npm i получаю много ошибок: npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app ode_modules\.staging\es5-ext-4ec2f638\string aw\shim.js' npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app ode_modules\.staging\es5-ext-4ec2f638\test\array\#\@@iterator\shim.js' npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app ode_modules\.staging\es5-ext-4ec2f638\test\array\#\concat\shim.js' npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app ode_modules\.staging\es5-ext-4ec2f638\test\array\#\copy-within\shim.js' что это? Как их убрать?
А вот такой вопрос: требуется создать сайт с нуля (pet-project). Что делать если не изучал основы веб--дизайна, а владеешь только CSS3? Просто сразу начинать стилизовать, рандомно крутить настройки под себя, без psd макета?
Ну про psd ты конечно загнул) Делать прототипы/макеты в ФШ это прошлый век!) Советую figma - там очень быстро и удобно можно накидать дизайн. Большое сообщество, куча гайдов. В общем то можно и без макета начать сразу верстать, но это будет довольно сложно, т.к. тебе придется фокусироваться на нескольких вещах сразу.
@@user-bc2nc5lt5p Ну я имел ввиду любые приложения) Помню работал немного с figma, avocode (free 14 days), zeplin. Но там просто смотрел css свойства :) Окей, спасиб, попробую👌
Без пропсов компонент не сможет быть переиспользуемым. В стейт хранятся данные компонента, которые не зависят от внешнего источника(страницы или другие компоненты)
Шикарное видео, для вводного понимания MobX.
Единственный момент, лучше не вкладывать тернарные операторы друг в друга, когда этим злоупотребляют, то потом такой код больно "раскручивать" и сопровождать.
Обычно сомнительно отношусь к видео с маленьким кол-вом просмотров, но тут все понятно, спасибо
внятно, доходчиво, по делу, без воды. отличное видео. лайк и подписка
Понятно, доходчиво, спасибо.
полчаса разбирался почему tasks undefined ))
Decorate doesn't exist anymore in v6, so closing
github.com/mobxjs/mobx/issues/2268
let tasks = this.tasks это все равно, что использовать this.tasks, объекты передаются по ссылке
5:16 метод sort не меняет исходный массив, а возвращает новый, так что slice здесь не нужен. У тебя неплохо получается, продолжай.
Спасибо!)
По поводу sort в mobx документации написано так:
Unlike the built-in implementation of the functions sort and reverse, observableArray.sort and reverse will not change the array in-place, but only will return a sorted / reversed copy. From MobX 5 and higher this will show a warning. It is recommended to use array.slice().sort() instead.
@@user-bc2nc5lt5p так нужно же было only return a sorted copy, для этого slice не нужен)
upd: был не прав. Попробовал без slice, работает правильно, но предупреждениями сыпит в консоль не останавливаясь, проще уже оставить.
Да, именно из за предупреждений я использовал slice! :)
Don't use an arrow func in the react class component
Привет. Хороший ролик. Но неизменяемость данных - это только про редакс. В мобыксе такого придерживаться нет необходимости.
пойдет, правда иммутабельность с мобх не нужна, это редакс осадок у тебя)
Привет, а что за тема у тебя в Visual Studio Code?
Привет, это Palenight
Привет! А ты знаешь, чем плохо объявлять стрелочные функции в рендере? Ты же людям знания несешь.
И концепция редакса с неизменяемыми данными совсем не вяжется с концепцией мобикса. Для чего переменная вообще не понятно.
Артём, спасибо! Хотелось бы найти обоснование необходимости (полезности) замены setState (или хуков) на MobX. Можете привести ссылочку на статью на эту тему? Для вас этот выбор очевиден, на сколько я понял.
Необходимость замены setState на глобальное состояние(например redux, mobx, effector, react context и др) стоит в том случае, если данные состояния в вашем приложении используются повсеместно, т.е. не на одной странице или в одном компоненте. Например в реальных приложениях на реактивных фреймворках(или любых других инструментах для создания реактивных приложений, напр. Flutter) в 100% случаев в глобальное состояние выносятся данные авторизации пользователя, т.к. зачастую для приложений с авторизацией требуются отдельная проверка доступности перехода на ту или иную страницу приложения в зависимости от статуса авторизации пользователя. Ну и просто это удобно, когда есть один источник состояния и его "правдивости". В то же время никогда в глобально состояние не стоит выносить данные, которые требуются для рендера одной страницы, например страница "видео" на TH-cam, она рендерится единожды, соответственно при получении данных с сервера (Rest API).
@@user-bc2nc5lt5p Ага понятно. Я использую компонент верхнего уровня (обычно он называется App) для хранения глобальных состояний и передаю остальным компонентам методы обновления состояний через props.
лайк))
спасиб за видос :) можешь также по redux сделать?
Да, в будущем обязательно будет, но уже на другом приложении. Думаю записать гайд на написание аналога Trello☺️
по redux же сотни роликов и десятки курсов
Хорошо бы если бы еще был исходный код с MobX
drive.google.com/file/d/1Mo54MxQopxovqOJi2eCamqQVcZCIpfa5/view?usp=sharing
@@user-bc2nc5lt5p скачал код, запустил npm i
получаю много ошибок:
npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app
ode_modules\.staging\es5-ext-4ec2f638\string
aw\shim.js'
npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app
ode_modules\.staging\es5-ext-4ec2f638\test\array\#\@@iterator\shim.js'
npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app
ode_modules\.staging\es5-ext-4ec2f638\test\array\#\concat\shim.js'
npm WARN tar ENOENT: no such file or directory, open 'D:\Distr\_React\Mobx\todo-app
ode_modules\.staging\es5-ext-4ec2f638\test\array\#\copy-within\shim.js'
что это? Как их убрать?
А вот такой вопрос: требуется создать сайт с нуля (pet-project). Что делать если не изучал основы веб--дизайна, а владеешь только CSS3? Просто сразу начинать стилизовать, рандомно крутить настройки под себя, без psd макета?
Ну про psd ты конечно загнул) Делать прототипы/макеты в ФШ это прошлый век!)
Советую figma - там очень быстро и удобно можно накидать дизайн. Большое сообщество, куча гайдов.
В общем то можно и без макета начать сразу верстать, но это будет довольно сложно, т.к. тебе придется фокусироваться на нескольких вещах сразу.
@@user-bc2nc5lt5p Ну я имел ввиду любые приложения) Помню работал немного с figma, avocode (free 14 days), zeplin. Но там просто смотрел css свойства :)
Окей, спасиб, попробую👌
а его можно задеплоить?
на heroku например
будет работать?
Да, но логичнее на Netlify(или gh pages) т.к. это все таки статик хостинг а heroku является PaaS
Я думал что хранилище требуется для того, чтобы отказаться от перекидывания данных в компоненты через props
Без пропсов компонент не сможет быть переиспользуемым. В стейт хранятся данные компонента, которые не зависят от внешнего источника(страницы или другие компоненты)
gj