How to use the effector.createEffect function in effector

To help you get started, we’ve selected a few effector examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github howtocards / frontend / src / pages / settings / model.js View on Github external
export const pageMounted = createEvent()
export const pageUnmounted = createEvent()

export const nameChanged = createEvent()
export const nameSubmitted = createEvent()

export const avaChangePressed = createEvent()
export const gravatarEmailChanged = createEvent()
export const gravatarEmailSubmitted = createEvent()
export const gravatarChangeCancelled = createEvent()

const saveGravatar = createEvent()
const saveName = createEvent()

const loadSettings = createEffect()
const saveSettings = createEffect()

export const $settings: Store = createStore(null)
export const $isSettingsReady = $settings.map(Boolean)
export const $isLoading: Store = combine(
  loadSettings.pending,
  saveSettings.pending,
  (loading, saving) => loading || saving,
)
export const $isDisabled: Store = combine(
  $isSettingsReady,
  $isLoading,
  (ready, loading) => !ready || loading,
)

// Stores for inputs
github howtocards / frontend / src / pages / view / model.js View on Github external
// @flow
import { combine, createEffect, createEvent, createStore } from "effector"
import type { Effect, Store } from "effector"

import { type Fetching, createFetching } from "@lib/fetching"
import { type Card, cardsApi } from "@api/cards"
import { $cardsRegistry, cardsToObject } from "@features/cards"

export const pageUnloaded = createEvent()

export const cardLoading: Effect<
  { cardId: number },
  { card: Card },
  void,
> = createEffect()
export const cardFetching: Fetching<*, void> = createFetching(
  cardLoading,
  "loading",
)

const $cardId = createStore(-1)

export const $card: Store = combine(
  $cardsRegistry,
  $cardId,
  (registry, cardId) => registry[cardId],
)

cardLoading.use(({ cardId }) => cardsApi.getById(cardId))

$cardId.on(cardLoading, (_, { cardId }) => cardId)
github howtocards / frontend / src / pages / settings / model.js View on Github external
export const pageMounted = createEvent()
export const pageUnmounted = createEvent()

export const nameChanged = createEvent()
export const nameSubmitted = createEvent()

export const avaChangePressed = createEvent()
export const gravatarEmailChanged = createEvent()
export const gravatarEmailSubmitted = createEvent()
export const gravatarChangeCancelled = createEvent()

const saveGravatar = createEvent()
const saveName = createEvent()

const loadSettings = createEffect()
const saveSettings = createEffect()

export const $settings: Store = createStore(null)
export const $isSettingsReady = $settings.map(Boolean)
export const $isLoading: Store = combine(
  loadSettings.pending,
  saveSettings.pending,
  (loading, saving) => loading || saving,
)
export const $isDisabled: Store = combine(
  $isSettingsReady,
  $isLoading,
  (ready, loading) => !ready || loading,
)

// Stores for inputs
github howtocards / frontend / src / features / cards / model / registry.events.js View on Github external
// @flow
import { createEvent, createEffect, type Effect } from "effector"
import type { Card } from "../types"

export const clearRegistry = createEvent()

export const usefulMarkClicked = createEvent()

export const setUsefulMark: Effect<
  { cardId: number, isUseful: boolean, previousValue?: boolean },
  { card: Card },
> = createEffect()
github zerobias / effector / src / babel / __tests__ / fixtures / create-effect.js View on Github external
//@flow

import {createEffect} from 'effector'

const foo = createEffect()
const bar = createEffect('hello')
const baz = createEffect({
  handler() {
    return 0
  },
})
const quux = createEffect('nice', {
  handler() {
    return 0
  },
})
const f = () => createEffect()
github zerobias / effector / src / babel / __tests__ / fixtures / create-effect.js View on Github external
//@flow

import {createEffect} from 'effector'

const foo = createEffect()
const bar = createEffect('hello')
const baz = createEffect({
  handler() {
    return 0
  },
})
const quux = createEffect('nice', {
  handler() {
    return 0
  },
})
const f = () => createEffect()
github zerobias / effector / website / editor / src / graphql.js View on Github external
'Content-Type': 'application/json',
      'x-api-key': ENDPOINT.PUBLIC_API_KEY,
    },
    body: JSON.stringify(data),
  })
    .then(req => req.json())
    .then(result => {
      if ('errors' in result) {
        console.error(result.errors)
        throw Error('request exception')
      }
      return result.data
    })
}
type ShareCode = Effect
export const shareCode: ShareCode = createEffect('share code', {
  async handler(code) {
    const {createCodePage} = await request({
      query: `
        mutation ReplMutation($codePage: CodePageInput!) {
          createCodePage(codePage: $codePage) {
            slug
          }
        }
      `,
      variables: {
        codePage: {code},
      },
      operationName: 'ReplMutation',
    })
    return createCodePage
  },
github zerobias / effector / examples / effector-react-native-example / App.js View on Github external
import * as React from 'react'
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native'
import AsyncStorage from '@react-native-community/async-storage'

import {createStore, createEvent, createEffect} from 'effector'
import {useStore} from 'effector-react'

const init = createEvent('init')
const increment = createEvent('increment')
const decrement = createEvent('decrement')
const reset = createEvent('reset')

const fetchCountFromAsyncStorage = createEffect({
  handler: async () => {
    const value = parseInt(await AsyncStorage.getItem('count'))
    return !isNaN(value) ? value : 0
  },
})

const updateCountInAsyncStorage = createEffect({
  handler: async count => {
    try {
      await AsyncStorage.setItem('count', `${count}`, err => {
        if (err) console.error(err)
      })
    } catch (err) {
      console.error(err)
    }
  },
github howtocards / frontend / src / pages / create / model.js View on Github external
createEvent,
  createEffect,
  createStore,
  createStoreObject,
} from "effector"

import { createFetching, type Fetching } from "@lib/fetching"
import { history } from "@lib/routing"
import { cardsApi, type Card } from "@api/cards"

export const titleChanged = createEvent>()
export const contentChanged = createEvent<*>()
export const formSubmitted = createEvent<*>()
export const pageUnmounted = createEvent()

const cardCreate = createEffect()
export const cardCreateFetching: Fetching = createFetching(cardCreate)

export const $title = createStore("")
export const $content = createStore<{}>(
  Plain.deserialize("Start typing here...").toJS(),
)
const $form = createStoreObject({
  title: $title,
  content: $content,
})

const trimEvent = (event) => event.currentTarget.value

$title.on(titleChanged.map(trimEvent), (_, title) => title)
$content.on(contentChanged, (_, content) => content)
$form.reset(pageUnmounted)
github zerobias / effector / website / editor / src / flow / domain.js View on Github external
import {createEffect, createStore, createEvent} from 'effector'
import type {FlowError} from './index.h'

export const typeNode = {
  current: document.createElement('div'),
  show: createEvent(),
  hide: createEvent()
}
typeNode.current.className = 'type-hover'

export const typeHint = createStore(null)

export const typeErrors = createStore>([])

export const typeAtPos = createEffect<
  {|
    filename: string,
    body: string,
    line: number,
    col: number,
  |},
  {|
    code: {|c: string, t: number, l: number|} | 'fail',
    success: boolean,
    processTime: number,
    service: 'type-at-pos',
  |},
  mixed,
>()

export const checkContent = createEffect<