How to use the effector.createApi function in effector

export type Tab =
  | 'graphite'
  | 'dom'
  | 'share'
  | 'editor'
  | 'outline'
  | 'settings'
  | 'errors'

export const isDesktopChanges = mediaMatcher('(min-width: 700px)')

export const tab = createStore(
  isDesktopChanges.getState() ? 'dom' : 'editor',
)

export const tabApi = createApi(tab, {
  showOutline: () => 'outline',
  showEditor: () => 'editor',
  showGraphite: () => 'graphite',
  showDOM: () => 'dom',
  showShare: () => 'share',
  showSettings: () => 'settings',
  showErrors: () => 'errors',
})

tab.on(isDesktopChanges, (state, isDesktop) => {
  if (state === 'editor' && isDesktop) return 'dom'
  if (state === 'outline' && isDesktop) return 'dom'
  return state
})

import {stats} from '../domain'
import {createComponent} from 'effector-react'
import {createApi, createStore, createStoreObject, Store} from 'effector'

const tab: Store<
  'events' | 'storages' | 'effects' | 'domains' | 'dom',
> = createStore('events')
tab.on(stats, (tab, {event, store, effect, domain}) => {
  if (tab === 'dom') return 'dom'
  if (event.length > 0) return 'events'
  if (store.length > 0) return 'storages'
  if (effect.length > 0) return 'effects'
  if (domain.length > 0) return 'domains'
  return 'events'
})
const api = createApi(tab, {
  showEvents: () => 'events',
  showStorages: () => 'storages',
  showEffects: () => 'effects',
  showDomains: () => 'domains',
  showDOM: () => 'dom',
})

const TabView = createComponent(tab, ({event, store, effect, domain}, tab) => {
  //TODO: unify this
  const className = `tab-content ${cx(
    tab === 'events' && 'show-events',
    tab === 'storages' && 'show-storages',
    tab === 'effects' && 'show-effects',
    tab === 'domains' && 'show-domains',
    tab === 'dom' && 'show-dom',
  )}`

export function createGate(
  name: string = 'gate',
  defaultState: Props = ({}: any),
): Gate {
  const status = createStore(false)
  const state: Store = createStore(defaultState)
  const {set} = createApi(state, {
    set: (_, state) => state,
  })

  const {open, close, destructor} = createApi(status, {
    open: () => GateComponent.predicate() && true,
    close: () => false,
    destructor: () => false,
  })

  class GateComponent extends React.PureComponent {
    static predicate = () => true

    static displayName = `Gate:${name}`
    static isOpen = false
    static current = state.getState()
    static open = open

//@flow

import React from 'react'
import {styled} from 'linaria/react'
import {createComponent} from 'effector-react'
import {createApi, createStore, Store} from 'effector'
import {LogsView} from '../logs/view'
import {TabHeaderList} from '../tabs/styled'

const tab: Store<'console'> = createStore('console')
const api = createApi(tab, {
  showConsole: () => 'console',
})

const Tab = styled.li`
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`

createEvent,
 createApi,
 type Event,
 type Effect,
} from 'effector'

import {todos} from './shape'
import type {
 TodoStatus,
 ShowFilter,
 TodoItem,
 PersistData,
 ID,
} from '../index.h'

export const {addTodo, removeTodo} = createApi(todos, {
 addTodo: (todos, newItem: TodoItem) => [...todos, newItem],
 removeTodo: (todos, id: ID) => todos.filter(item => item.id !== id),
})

export const injectData: Event = createEvent('load data to stores')

export const saveAll: Effect = createEffect('save all todos')
export const loadAll: Effect<
 void,
 PersistData,
 'nothing to load',
> = createEffect('load all todos')

//@flow

import React from 'react'
import {styled} from 'linaria/react'
import {LogsView} from '../logs/view'
import {createComponent} from 'effector-react'
import {createApi, createStore, Store} from 'effector'

const tab: Store<'console'> = createStore('console')
const api = createApi(tab, {
  showConsole: () => 'console',
})

const Tab = styled.li`
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 15px;
  margin: 0;
  background-color: ${({isActive}) => (isActive ? 'white' : 'inherit')};
  border-bottom: ${({isActive}) => (isActive ? '1px solid #fff' : 'none')};
  margin-bottom: ${({isActive}) => (isActive ? '-1px' : '0')};
`

const TabContent = styled.div`

export function createGate(
  name: string = 'gate',
  defaultState: Props = ({}: any),
): Gate {
  const status = createStore(false)
  const state: Store = createStore(defaultState)
  const {set} = createApi(state, {
    set: (_, state) => state,
  })

  const {open, close, destructor} = createApi(status, {
    open: () => GateComponent.predicate() && true,
    close: () => false,
    destructor: () => false,
  })

  class GateComponent extends React.PureComponent {
    static predicate = () => true

    static displayName = `Gate:${name}`
    static isOpen = false
    static current = state.getState()
    static open = open
    static close = close
    static status = status
    static state = state
    static set = set

export function createHistory(store, {
    limit = 10,
    events,
    filter,
    debug
} = {}) {
    const initialState = store.getState();

    const history = createStore({
        states: [initialState],
        head: 0
    });

    const currentState = history.map(({states, head}) => states[head]);

    const {push, undo, redo, clear} = createApi(history, {
        push: ({ states, head }, state) => ({
            states: [state].concat(states.slice(head)).slice(0, limit),
            head: 0
        }),
        undo: ({ states, head }) => ({
            states,
            head: Math.min(head + 1, states.length - 1)
        }),
        redo: ({ states, head }) => ({
            states,
            head: Math.max(head - 1, 0)
        }),
        clear: ({states, head}) => ({
            states: states.length > 0 ? [states[head]] : [],
            head: 0
        })