Comments 28
— Использовать голый React или React + Redux.
Как заставить разработчика полюбить React?
— Использовать его в связке с MobX, используя React чисто как View, а для управления состоянием использовать только MobX.
Использовать его в связке с MobX
В связке с MobX практически любые шаблонизаторы и компоненты работают просто прекрасно. Так что фиг знает насчёт любви именно к реакту.
— Наследование пропсов: stackoverflow.com/a/45677919
— Generic компоненты: react-typescript-cheatsheet.netlify.app/docs/advanced/guides/generic_components
— Типизация children
У реакта на 100% типизированы шаблоны
Не «у реакта», а в jsx/tsx. Jsx/tsx доступен не только в реакте.
И jsx хоть и даёт определенную типизацию в шаблонах — но и не 100%, валидность html вам никто не проверит, например, не говоря уж про то, что jsx не имеет 1:1 соответствия с html, и это тоже мешает.
Так что это фича не из разряда прорывных, а из «шаг вперед, шаг назад».
Для большинства главный минус MobX в том, что он слишком магический, нужно дольше разбираться, включать мозг. Большинству просто лень потратить пару вечеров, значительно облегчив себе дальнейшую жизнь. Да и зачем? Возросшая в полтора раза эффективность команды далеко не всегда очевидна руководству и вовсе не гарантирует симметричное увеличение ЗП.
mobx 4 версия это getters/setters — learn.javascript.ru/descriptors-getters-setters
mobx 5 версия это proxy — learn.javascript.ru/proxy
А аргумент «потратить пару вечеров, значительно облегчив себе дальнейшую жизнь» я думаю более чем оправдан, т.к. это не просто облегчение дальнейшей жизни, это сильное облегчение дальнейшей жизни.
Вся магия:
mobx 4 версия это getters/setters
ну если достаточно такого уровня понимания, то да, всё просто и понятно — в аксессорах что-то там происходит и норм). Думаю многим хочется понимать чуть больше: как происходит выявление и поддержание в актуальном состоянии зависимостей вычисляемых ячеек, как происходит распространение изменений по цепочке вычисляемых ячеек и тд… Понимать это хочется на случай возможной отладки в каком то сложном кейсе и вот с этим пониманием как раз и появляются проблемы, поскольку алгоритм не так уж и примитивен и пару вдумчивых вечеров придётся ему уделить.
mobx 5 версия это proxy
с proxy как раз меньше всего проблем должно возникать, так как он просто обёртка над алгоритмом ничего о нём не знающем. Это просто способ уменьшить количество @observable в коде.
А аргумент «потратить пару вечеров, значительно облегчив себе дальнейшую жизнь» я думаю более чем оправдан, т.к. это не просто облегчение дальнейшей жизни, это сильное облегчение дальнейшей жизни.
да я то как раз не против и даже за, я просто пытаюсь найти объяснение, почему столь удобный подход получил столь малое распространение.
Интересно, страничка https://habr.com/ru/post/282578/ (Mobx — управление состоянием вашего приложения, перевод MobX Getting Started) нужной глубины даст?..
Вообще-то у каждого есть свои предпочтения, кому-то нравится Редакс, а кому-то мобх, даже если ты разобрался с последним это не значит, что ты его будешь везде юзать.
Ну а так, я лично более жизанутый по этой теме) я написал свою либу, которая удовлетворяет мои потребности. Если интересно, react-stones. Легковесная, простая, быстрая. Буду рад ишуям всяким
map{State,Dispatch}ToProps в одну функцию — на мой взгляд, локальность кода очень уж страдает. Чтобы понять, какие props получит компонента, придется листать эти километровые switch/case-штуки.Мы их просто рядом с вызовом
connect() пишем.
Почему во всех статьях и во всех уроках в редьюсере пишут эти уродливые switch case? Можно же сразу показать как правильно и удобно и красиво это сделать. Статья от этого больше не стала бы
Таков coding style от разработчиков redux (рекомендация разработчиков по использованию redux). Конечно можно это реализовывать и другими методами, но, наверное, лучше использовать общепринятые конструкции.
Потому что это стандарт. Все пишут редьюсеры таким образом. Что бы разные разработчики могли тебя понять.
Дык а как правильно и красиво-то?!
Решил сделать следующий pet проект на React + Redux + TypeScript после Ангуляра.
Пытаюсь решить простую задачу, у меня есть state в нем поле tick, поле изменяется таймером.
Хочу чтобы циферки на таймере бежали.
Перечитал 100500 док с примерами не могу понять как сделать. По идее задача должна решаться в одну строчку, если вообще не автоматически. Но что-то не решается.
Близок к тому, чтобы сдаться и переделать на MobX
Введение в Redux & React-redux