Asosiy tarkibga o'tish

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,
)

$repos.watch(repos => {
console.log(`${repos.length} repos`)
})
// => 0 repos

await fetchUserReposFx({name: 'zerobias'})
// => 26 repos

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