How to use the effector.createEvent function in effector

// @flow
import { createEffect, createEvent, createStore } from "effector"
import type { Effect, Event, 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 pageReady: Event = createEvent()

const homeCardsLoading: Effect = createEffect()
export const homeCardsFetching: Fetching<*, void> = createFetching(
  homeCardsLoading,
  "loading",
)

export const $cardsIds: Store = createStore([])

homeCardsLoading.use(() => cardsApi.getLatest())

$cardsIds.on(homeCardsLoading.done, (_, { result }) =>
  result.map((card) => card.id),
)

$cardsRegistry.on(homeCardsLoading.done, (registry, { result }) => {

// @flow
import Plain from "slate-plain-serializer"
import {
  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,
})

// @flow
import { createStore, createEvent } from "effector"

export const $searchHistory = createStore([])

export const searchHistoryChanged = createEvent()

$searchHistory.on(searchHistoryChanged, (state, newRecord) =>
  state.concat(newRecord),
)

export function componentFromStore(
  propsToVdom: (props: Store) => Store,
) {
  class ComponentFromStore extends React.Component {
    state /*: {vdom: React.Node, ...}*/ = {vdom: null}

    propsEmitter: Event = createEvent()

    // Stream of props
    props$: Store = createStore((null: any))
      .on(this.propsEmitter, (_, props) => props)
      .map(props => {
        if (props) return props
        /*::return props*/
      })

    // Stream of vdom
    vdom$ = propsToVdom(this.props$)

    subscription: Subscription

    componentWillMount() {
      // Subscribe to child prop changes so we know when to re-render

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)

function reduxStoreFabric({
  defaultState,
  reducer,
}: {
  defaultState: T,
  reducer: (state: T, payload: {+type: string, payload?: any, ...}) => T,
}) {
  let currentReducer = reducer

  const dispatch = createEvent<{+type: string, payload?: any, ...}>('dispatch')
  const update = createEvent('update')
  const store = createStore(defaultState)
  store.on(dispatch, (state, event) => {
    try {
      return currentReducer(state, event)
    } catch (err) {
      console.error(err)
    }
    return state
  })

  forward({
    from: store,
    to: update,
  })
  const wrapper = {}

): StoreView {
  let storeFn: (props: Props) => Store
  let store: Store
  if (is.store(shape)) {
    store = (shape: any)
  } else if (typeof shape === 'function') {
    storeFn = shape
  } else {
    if (typeof shape === 'object' && shape !== null) {
      //$todo
      store = createStoreObject(shape)
    } else throw Error('shape should be a store or object with stores')
  }
  const storeName = store?.shortName ?? 'Unknown'
  const mounted = createEvent(`${storeName}.View mounted`)
  const unmounted = createEvent(`${storeName}.View unmounted`)
  //prettier-ignore
  const instanceFabric: (props: Props) => Store =
    typeof shape === 'function'
      ? (storeFn: any)
      : (props => store)
  function RenderComponent(props: Props) {
    const propsRef = React.useRef(props)
    propsRef.current = props
    const _store = React.useMemo(() => instanceFabric(props), [])
    const state = useStore(_store)
    useIsomorphicLayoutEffect(() => {
      mounted({props: propsRef.current, state: _store.getState()})
      return () => {
        unmounted({props: propsRef.current, state: _store.getState()})
      }
    }, [])

export default (initialSelectedData, $computedData, handleDelete) => {
  const $selectedData = createStore(initialSelectedData);
  const toggleSelectRow = createEvent();
  const toggleSelectAll = createEvent();
  const handleSelect = createEvent();

  $selectedData
    .on(handleSelect, (_, nextSelectedData) => nextSelectedData)
    .on(toggleSelectRow, (selectedData, selectedDataItem) => {
      const nextSelectedData = [...selectedData];
      const dataIndex = nextSelectedData.findIndex(
        data => data === selectedDataItem
      );
      if (dataIndex !== -1) {
        nextSelectedData.splice(dataIndex, 1);
      } else {
        nextSelectedData.push(selectedDataItem);
      }
      return nextSelectedData;
    })
    .on(sample($computedData, toggleSelectAll), (selectedData, computedData) =>

export default initialData => {
  const $data = createStore(initialData);
  const handleDelete = createEvent();

  $data.on(handleDelete, (data, deletedData) =>
    data.filter(dataItem => !deletedData.includes(dataItem))
  );

  return { $data, handleDelete };
};

export default initialFilterValues => {
  const $filterValues = createStore(initialFilterValues);
  const addFilter = createEvent();
  const removeFilter = createEvent();
  const resetFilter = createEvent();

  $filterValues
    .on(addFilter, (filterValues, { columnName, value }) => ({
      ...filterValues,
      [columnName]: value,
    }))
    .on(removeFilter, (filterValues, { columnName }) =>
      Object.keys(filterValues).reduce((nextFilterValues, prevColumnName) => {
        if (prevColumnName !== columnName) {
          nextFilterValues[prevColumnName] = filterValues[prevColumnName];
        }
        return nextFilterValues;
      }, {})
    )
    .on(resetFilter, filterValues => ({}));