0.events.js

import { createEvent } from 'effector'

export const loginInputChanged = createEvent('Login input changed')
export const passwordInputChanged = createEvent('Password input changed')
export const formReset = createEvent('Form was reset')
export const submitPressed = createEvent('Submit button pressed')
export const processSubmit = createEffect('Process submit')

1.stores.js

import { createStore, createStoreObject } from 'effector'

import { loginInputChanged, passwordInputChanged } from './events'

export const $login = createStore('')
export const $password = createStore('')
export const $isDisabled = createStore(false)

export const $form = createStoreObject({ login: $login, password: $password })

$login
  .on(loginInputChanged, (state, evt) => evt.target.value)
  .reset(formReset)
  .reset(processSubmit.done)

$password
  .on(passwordInputChanged, (state, evt) => evt.target.value)
  .reset(formReset)
  .reset(processSubmit.done)

$isDisabled
  .on(processSubmit, () => true)
  .on(processSubmit.done, () => false)
  .on(processSubmit.fail, () => false)

2.subscriptions.js

import { $form } from './stores'
import { submitPressed, processSubmit } from './events'

processSubmit.use(/* Do some request */)

submitPressed.watch(() => {
  processSubmit($form.getState())
})

3.form.js

import React from 'react'
import { useStore } from 'effector-react'

import { $login, $password } from './stores'
import { loginInputChanged, passwordInputChanged } from './events'

export const LoginInput = () => {
  const login = useStore($login)
  const isDisabled = useStore($isDisabled)
  
  return <input value={login} disabled={isDisabled} onChange={loginInputChanged} />
}

export const PasswordInput = () => {
  const password = useStore($password)
  const isDisabled = useStore($isDisabled)
  
  return <input value={password} disabled={isDisabled} onChange={passwordInputChanged} />
}
  
export const SubmitButton = () => {
  const isDisabled = useStore($isDisabled)
  
  return <button disabled={isDisabled} onClick={submitPressed}>Submit</button>
}
  
export const Form = () => {
  return <form onSubmit={submitPressed}>
    <LoginInput />
    <PasswordInput />
    <SubmitButton />
  </form>
}