createEffect

Method for creating an effect

createEffect with handler

Creates an effect with given handler

createEffect(handler?)

Arguments

  1. handler (Function): function to handle effect calls, also can be set with use(handler)

Returns

Effect: New effect

note

You must provide a handler either in createEffect or in .use method later, otherwise effect will throw with "no handler used in %effect name%" error

since

effector 21.3.0

Examples

Create effect with handler

import {createEffect} from 'effector'
const fetchUserReposFx = createEffect(async ({name}) => {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
})
fetchUserReposFx.done.watch(({params, result}) => {
console.log(result)
})
await fetchUserReposFx({name: 'zerobias'})

Try it

Change state on effect completion

import {createStore, createEffect} from 'effector'
const fetchUserReposFx = createEffect(async ({name}) => {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
})
const repos = createStore([]).on(fetchUserReposFx.doneData, (_, repos) => repos)
await fetchUserReposFx({name: 'zerobias'})

Try it

Set handler to effect after creating

import {createEffect} from 'effector'
const fetchUserReposFx = createEffect()
fetchUserReposFx.use(async ({name}) => {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
})
await fetchUserReposFx({name: 'zerobias'})

Try it

Watch effect status

import {createEffect} from 'effector'
const fetchUserReposFx = createEffect(async ({name}) => {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
})
fetchUserReposFx.pending.watch(pending => {
console.log(`effect is pending?: ${pending ? 'yes' : 'no'}`)
})
fetchUserReposFx.done.watch(({params, result}) => {
console.log(params) // {name: 'zerobias'}
console.log(result) // resolved value
})
fetchUserReposFx.fail.watch(({params, error}) => {
console.error(params) // {name: 'zerobias'}
console.error(error) // rejected value
})
fetchUserReposFx.finally.watch(({params, status, result, error}) => {
console.log(params) // {name: 'zerobias'}
console.log(`handler status: ${status}`)
if (error) {
console.log('handler rejected', error)
} else {
console.log('handler resolved', result)
}
})
await fetchUserReposFx({name: 'zerobias'})

Try it

createEffect with config

Creates an effect with handler and name from given config object

createEffect({handler, name})

Arguments

  1. config? (Params): effect
    • handler (Function): function to handle effect calls, also can be set with use(handler)
    • name? (string): Optional effect name

Returns

Effect: New effect

Examples

Create named effect

import {createEffect} from 'effector'
const fetchUserReposFx = createEffect({
name: 'fetch user repositories',
async handler({name}) {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
},
})
await fetchUserReposFx({name: 'zerobias'})

Try it

Last updated on