React-lens — эффективное управление состоянием в приложениях в ReactJs

[markelov69]

Скажите на милость, зачем нужна вся эта дичь если есть много много лет MobX??
Просто взгляните:

Это просто тупо нативный код который работает. Проще вообще не может быть, никак, от слова совсем. Это максимально наглядный и понятный код для всех.

Теперь добавим реакта:

Код всё так же остался максимально простым, наглядный и понятным для всех.
Ссылка на этот код: https://stackblitz.com/edit/stackblitz-starters-omqu6z?file=src%2FApp.tsx

[daria_ananas]

Так можно и про Хабр сказать =)

Безусловно, код будет работать. Однако вопрос в том, как его потом масштабировать, на сколько он связан со структурой состояния, можно ли его переиспользовать и т. п.

Тут дело в том, что для Вас и ваших задач достаточно MobX. Другие задачи могут потребовать других возможностей, которые найдутся в других библиотеках, как MST, например.

Пожалуйста, посмотрите ещё раз, на ReactLens - код был бы раза в два меньше и проще.

[bromzh]

Однако вопрос в том, как его потом масштабировать

Пишешь новый метод/свойство, и всё, оно уже в состоянии. Нужна вложенность - просто добавляешь другой класс как свойство в текущий, и всё.

на сколько он связан со структурой состояния, можно ли его переиспользовать

Это и есть состояние. Как его организуете, такое состояние и будет. Нет отдельных сторов, и отдельных данных для них. Хочешь - сделай свойства простых объектов нереактивными и меняй эти объекты целиком. Хочешь - сделай каждое свойство реактивным, тоже нет проблем.

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

Мне вот всегда интересно, что же за возможности такие. Вечно они когда-то будут нужны, а не сейчас.

код был бы раза в два меньше и проще.

У вас же код разный. Но фактически, код Mobx минималистичен, там только класс, свойства, геттеры и методы с логикой. В терминах менеджеров состояний геттеры - это computable-свойства, методы - это action, свойства - сами данные. Если строки в классах не переносить, и убрать fetch будет столько же строк. И только одна строка, относящаяся к Mobx - makeAutoObservable(this)В реакт-части тоже ничего лишнего, только 1 обёртка observer

У мобикса есть минусы конечно - он не модно-функциональный (хотя там тоже можно иммутабельность сделать), там не такой шикарный dev-tools, как у редакса. Иногда его надо потюнить, есть не совсем ясные моменты с отслеживанием изменений (если ты не знаешь как оно работает). Но зато там реально минимум кода самого мобикса - нет этих постоянных createStore, нет селекторов, нет экшенов/сеттеров, нет мидлварей и прочих саг - ты просто описываешь view-model, и используешь в реакте напрямую. И он не прибит гвоздями к реакту - можно свою бизнес логику описать на таких моделях, а потом перенести на другой модный фреймворк

[atomic1989]

Отличный коммент! Видя внешне базовые хуки, их производные, эти непонятные механизмы сторов, вызывает глубокое отвращение. И самое главное на серьёзных щах восхищаются этим)

[Alexandroppolus]

там не такой шикарный dev-tools, как у редакса

С дев-тулзами главная проблема, на мой взгляд, что в дебаггере нельзя просто взять и зайти внутрь функции, обернутой в экшн - придется покуролесить по промежуточному мобиксовому коду. Т.е. хочешь заходить - ставь брекпоинт внутри функции. Это один из двух моментов, которые мне не совсем нравятся.

Второй момент - в опциях для makeAutoObservable/makeObservable, которые вторым параметром, нельзя упоминать то, что в классе помечено как private/protected.

В остальном - идеальный инструмент для стейт-манагерства, пользую с удовольствием.

[kubk]

Второй момент - в опциях для makeAutoObservable/makeObservable, которые вторым параметром, нельзя упоминать то, что в классе помечено как private/protected.

Можно если передать в дженерик поля, которых не видно: makeAutoObservable<'a' | 'b'>(this, { a: false, b: false })

[Alexandroppolus]

Да, действительно. Спасибо. Только чуть поправлю: makeAutoObservable<this, 'a' | 'b'>(this, { a: false, b: false })

[kubk]

не такой шикарный dev-tools, как у редакса.

Базовая интеграция с redux-devtools есть в этом пакете. Правда в большинстве случаев хватает обычного логгера, который вместо [Proxy, Proxy] полноценно форматирует объекты. Такая функция в пакете выше тоже есть.

[restapi]

Зачем эти костыли с обёрткой и конструктором если можно zustand использовать который весит 7кб...

[markelov69]

Зачем эти костыли с обёрткой и конструктором

Лол, в зачем вообще эти костыли с JS кодом? Ведь есть assembler, ну или C накрайняк.

можно zustand использовать который весит 7кб...

И писать вот такой код??? Ахахах, пока все дома этого никто в здравом уме делать не станет.

// Писать вот это
set((state) => ({ bears: state.bears + 1 }))

// Вместо
this.bears++


// Писать вот это
function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

// Вместо
function Controls() {
  return <button onClick={state.increasePopulation}>one up</button>
}

Это же как надо себя ненавидеть...

[bromzh]

Выглядит как 100000000000 точно таких же библиотек. В чём прикол-то?

[jodaka]

Так там же во введении написано: "Мыши плакали, кололись, но продолжали жрать кактус".

[ruslanintera]

Да что вы на неё набросились все))

Девушка просто рассказала про одну из библиотек, это как запостить фото котика и получать гневные комменты: Выглядит как 100000000000 точно таких же котиков. В чём прикол-то?