Как перейти с on-change на Valtio в ванильном JS

Question

Nikolai Gagarinov · Answer

Мы заменяем `on-change` на `valtio/vanilla`, чтобы подписываться на изменения состояния и обновлять UI.

## Ссылки

* [Valtio — официальный сайт](https://valtio.dev/)
* [Valtio (vanilla) — документация](https://valtio.dev/docs/vanilla)
* [Valtio API — proxy, subscribe, snapshot](https://valtio.dev/docs/api/vanilla)
* [Valtio utils — proxySet, subscribeKey](https://valtio.dev/docs/api/utils)
* [Valtio репозиторий](https://github.com/pmndrs/valtio)
* [on-change репозиторий](https://github.com/sindresorhus/on-change)

## Почему Valtio

* `proxy` делает состояние реактивным без ручного вызова рендера.
* `subscribe` позволяет слушать изменения нужных частей состояния.
* Можно продолжать мутировать объект напрямую (как и раньше).

## Минимальный пример

До (on-change):

```js
import onChange from 'on-change'

const state = {
  count: 0,
}

const watchedState = onChange(state, (path) => {
  if (path === 'count') {
    console.log('count:', state.count)
  }
})

watchedState.count += 1
```

После (Valtio):

```js
import { proxy, subscribe, snapshot } from 'valtio/vanilla'

const state = proxy({
  count: 0,
})

subscribe(state, () => {
  const snap = snapshot(state)
  console.log('count:', snap.count)
})

state.count += 1
```

## Подписка на кусок состояния

Если нужно реагировать только на часть состояния:

```js
import { proxy, subscribe, snapshot } from 'valtio/vanilla'

const state = proxy({
  form: {
    valid: false,
    error: null,
  },
})

subscribe(state.form, () => {
  const snap = snapshot(state)
  console.log('form.valid:', snap.form.valid)
})

state.form.valid = true
```

Важно: подписка на `state.form` работает, только если вы меняете поля, а не заменяете весь объект `form`.

## Не заменяйте вложенные объекты целиком

Так делать **не стоит**, если вы подписываетесь на вложенный объект:

```js
// плохо: заменяется весь form
state.form = { ...state.form, valid: true }
```

Лучше так:

```js
// хорошо: меняются поля
state.form.valid = true
state.form.error = null
```

Если вы все-таки хотите заменять объект целиком, нужно подписываться на корневой объект:

```js
import { subscribeKey } from 'valtio/vanilla/utils'

subscribeKey(state, 'form', () => {
  const snap = snapshot(state)
  console.log('form changed:', snap.form)
})
```

## Особенность Set

Обычный `Set` не реактивен. Для него есть `proxySet`:

```js
import { proxySet } from 'valtio/vanilla/utils'

const seenPosts = proxySet()
seenPosts.add('id-1')
```

## Короткий пример из RSS Reader

Подписка в модуле View:

```js
import { proxy, subscribe, snapshot } from 'valtio/vanilla'

const watchedState = proxy(initState)

const renderForm = () => {
  const { form } = snapshot(watchedState)
  // обновление формы
}

subscribe(watchedState.form, renderForm)
```

Изменения в модели:

```js
watchedState.form.valid = true
watchedState.form.error = null
```

## Итог

* `on-change` заменяем на `valtio/vanilla`.
* Состояние — через `proxy`.
* Обновления UI — через `subscribe` и `snapshot`.
* Вложенные объекты мутируем по полям.
* Для `Set` используем `proxySet`.

Как перейти с on-change на Valtio в ванильном JS

Ответы

Ссылки

Почему Valtio

Минимальный пример

Подписка на кусок состояния

Не заменяйте вложенные объекты целиком

Особенность Set

Короткий пример из RSS Reader

Итог