createEffect

Метод для создания эффектов.

createEffect с обработчиком событий

Формула

createEffect(handler?)

Аргументы

1. handler (Function): Функция для обработки вызовов эффектов, также может быть задана с помощью use(handler)

Возвращает

Effect: Новый эффект

note

Вы должны задать обработчик в createEffect или же в .use методе позже, иначе эффект выбросит исключение "no handler used in %effect name%"

since

effector 21.3.0

Примеры

Создание эффекта с обработчиком событий

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'})

Запустить пример

Изменение состояния по завершению эффекта

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 репозиториев

await fetchUserReposFx({name: 'zerobias'})
// => 26 репозиториев

Запустить пример

Назначение обработчика для эффекта после его создания

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'})

Запустить пример

Наблюдение за состоянием эффекта

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) // разрешенное значение, результат
})

fetchUserReposFx.fail.watch(({params, error}) => {
  console.error(params) // {name: 'zerobias'}
  console.error(error) //  отклоненное значение, ошибка
})

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'})

Запустить пример

createEffect с параметрами

Создает эффект с обработчиком событий и именем, которые заданы в объекте параметров

Формула

createEffect({handler, name})

Аргументы

1. config? (Params): Эффект
   • handler (Function): Функция для обработки вызовов эффектов, также может быть назначена с use(handler)
   • name? (string): Необязательное имя эффекта

Возвращает

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'})

Запустить пример