в закрепе как раз ссылочка на библиотеку для работы с формами

😔

хотелось бы взглянуть на что-то без библиотек

В репе примеры

♥️

Example 1 — прям шик и блеск во всей эффекторной красе. но я спрашивал про форму редактирования. как кошерно обрабатывать загрузку данных перед рендером формы, куда складывать изменения в процессе заполнения формы, вот это вот всё

допустим, форма редактирования профиля

const profile = createStore({
 name: 'guest',
 age: 18,
})

если при открытии формы редактирования нужно сделать запрос на сервер за текущими данными, то это эффект

const fetchProfile = createEffect()

profile.on(fetchProfile.doneData, (_, profile) => profile)

const fetchProfile = createEffect()

profile.on(fetchProfile.doneData, (_, profile) => profile)

.doneData забыл?

чтобы показать лоадер пользователю на время загрузки, используется стор .pending (есть в доке эффекта)

const EditProfile = () => {

  useEffect(() => {
    fetchProfile()
  }, [])
  const loading = useStore(fetchProfile.pending)

  return loading
    ? <Loading />
    : <ProfileForm />
}

да, благодарю)

данные при редактировании формы можно складывать в этот же стор profile

const changeName = createEvent()
profile.on(changeName, ({age}, name) => ({name, age}))

const ProfileForm = () => {
  const {name, age} = useStore(profile)

  return <input value={name} onChange={e => changeName(e.target.value)} />
}

Красота охуеть просто

ну и наконец, чтобы отправить форму обратно на сервер нужен эвент сабмита, эффект отправки и sample

const clickSubmit = createEvent()

const saveProfileFx = createEffect()

sample({
  source: profile,
  clock: clickSubmit,
  target: saveProfileFx
})

меня малость смущает, что

$form = restore(fx)
$form.on(change, …)

это один и тот же стор. это точно ок? чую задом, что может где-то что-то подпортить

.on чейнится, можно создать стор и подключить к нему всё, что требуется сразу

$form = restore(fx)
 .on(a, ...)
 .on(b, ...)

ну, если кто-то дернет fx то у тебя новое значение в сторе будет

я не прав?