createEffect

Method for creating an effect

createEffect with handler#

Creates an effect with given handler

createEffect(handler?)

Arguments

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

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