import {createEffect, createStore} from 'effector'

​

const fetchUserFx = createEffect({

  async handler({id}) {

    const res = await fetch(`https://example.com/users/${id}`)

    return res.json()

  },

})

​

const users = createStore([]) // Default state

  // add reducer for fetchUserFx.doneData event (triggered when handler resolved)

  .on(fetchUserFx.doneData, (users, user) => [...users, user])

​

// subscribe to handler resolve

fetchUserFx.done.watch(({result, params}) => {

  console.log(params) // => {id: 1}

  console.log(result) // => resolved value

})

​

// subscribe to handler reject or throw error

fetchUserFx.fail.watch(({error, params}) => {

  console.error(params) // => {id: 1}

  console.error(error) // => rejected value

})

​

// you can replace function anytime

fetchUserFx.use(function anotherHandler() {})

​

// call effect with your params

fetchUserFx({id: 1})

​

// handle promise

const data = await fetchUserFx({id: 2})