Перейти к основному содержимому

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

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

Последнее обновление