Effector

Effector

  • Docs
  • Try
  • API
  • Blog
  • Twitter
  • GitHub

›effector

effector

  • API Reference
  • Event
  • Store
  • Effect
  • Domain
  • createStore
  • createEvent
  • createEffect
  • createDomain
  • createStoreObject
  • combine
  • restore
  • createApi
  • clearNode
  • merge
  • split
  • sample
  • guard
  • forward
  • fromObservable

effector-react

  • API Reference
  • useStore
  • useStoreMap
  • useList
  • createComponent
  • Gate
  • createGate
  • useGate
  • createStoreConsumer

effector-vue

  • API Reference
  • VueEffector
  • ComponentOptions
  • Vue
Edit

createEffect(name?, { handler })

Creates an effect

Arguments

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

Returns

(Effect): A container for async function.

Note: You are not supposed to Forward parts of Effect (even though it consists of Events and Stores), since it's a complete entity on its own. This behavior will not be supported

Examples

Create unnamed effect

import {createEffect} from 'effector'

const fetchUserRepos = createEffect({
  handler: async ({name}) => {
    const url = `https://api.github.com/users/${name}/repos`
    const req = await fetch(url)
    return req.json()
  },
})

Create named effect

import {createEffect} from 'effector'

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

Set handler to effect after creating

import {createEffect} from 'effector'

const fetchUserRepos = createEffect()

fetchUserRepos.use(async ({name}) => {
  const url = `https://api.github.com/users/${name}/repos`
  const req = await fetch(url)
  return req.json()
})

Watch effect status

import {createEffect} from 'effector'

const fetchUserRepos = createEffect({
  handler: async ({name}) => {
    const url = `https://api.github.com/users/${name}/repos`
    const req = await fetch(url)
    return req.json()
  },
})

fetchUserRepos.pending.watch(pending => {
  console.log(`effect is pending?: ${pending ? 'yes' : 'no'}`)
})

fetchUserRepos.done.watch(({params, result}) => {
  console.log(params) // {name: 'zerobias'}
  console.log(result) // resolved value
})

fetchUserRepos.fail.watch(({params, error}) => {
  console.error(params) // {name: 'zerobias'}
  console.error(error) // rejected value
})

fetchUserRepos.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)
  }
})

fetchUserRepos({name: 'zerobias'})

Change state

import {createStore, createEffect} from 'effector'

const fetchUserRepos = createEffect({
  handler: async ({name}) => {
    const url = `https://api.github.com/users/${name}/repos`
    const req = await fetch(url)
    return req.json()
  },
})

const repos = createStore([]).on(
  fetchUserRepos.done,
  (_, {result: repos}) => repos,
)
← createEventcreateDomain →
Effector
Docs
Getting StartedAPI Reference
Community
User ShowcaseStack OverflowGitterTwitter
More
GitHubStar
Copyright © 2019 zerobias