How to use the effector.createStore function in effector

// @flow
import Cookies from "browser-cookies"
import { createStore, createEvent } from "effector"
import { loadSession } from "./session.events"

const TOKEN_ID = "hw-token"

export const tokenChanged = createEvent()
export const tokenDropped = createEvent()

export const $token = createStore(Cookies.get(TOKEN_ID) || null)

$token.on(tokenChanged, (_, token) => token)
$token.on(tokenDropped, () => null)

$token.watch((token) => {
  if (token) {
    Cookies.set(TOKEN_ID, token)
    setTimeout(() => loadSession(), 0)
  }
})

tokenDropped.watch(() => Cookies.erase(TOKEN_ID))

// @flow

import {createStore, type Store} from 'effector'

// @generate
export type User = {|
  // @id
  id: number,
  username: string,
|}

export const getUserId = (user: User) => user.id;
export const user: Store = createStore(null);
export const userList: Store = createStore([]);
export const userUsername: Store> = createStore(new Map());
export const userId: Store> = createStore(new Map());

// @generate
export type Comment = {|
  // @id
  id: number,
  user: User,
  text: string,
|}
export const getCommentId = (comment: Comment) => comment.id;
export const comment: Store = createStore(null);
export const commentList: Store = createStore([]);
export const commentText: Store> = createStore(new Map());
export const commentUser: Store> = createStore(new Map());
export const commentId: Store> = createStore(new Map());

export const user: Store = createStore(null);
export const userList: Store = createStore([]);
export const userUsername: Store> = createStore(new Map());
export const userId: Store> = createStore(new Map());

// @generate
export type Comment = {|
  // @id
  id: number,
  user: User,
  text: string,
|}
export const getCommentId = (comment: Comment) => comment.id;
export const comment: Store = createStore(null);
export const commentList: Store = createStore([]);
export const commentText: Store> = createStore(new Map());
export const commentUser: Store> = createStore(new Map());
export const commentId: Store> = createStore(new Map());

//@flow
import {createStore} from 'effector'

const foo = createStore('foo')
const a = createStore('h')
const b = createStore('h', {})
//$off
const c = createStore('h', 23020)
const config = {option: 0}
const dod = createStore(null, config)

const f = a => createStore(a)

//@flow
import {createStore} from 'effector'

const foo = createStore('foo')
const a = createStore('h')
const b = createStore('h', {})
//$off
const c = createStore('h', 23020)
const config = {option: 0}
const dod = createStore(null, config)

const f = a => createStore(a)

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 }) => {
  return {
    ...registry,
    ...cardsToObject(result),
  }
})

pageReady.watch(() => {
  homeCardsLoading()

//@flow

import {createEvent, createStore, Store} from 'effector'
import type {Methods} from '../components/Console/methods'

export const realmLog = createEvent<{|
  method: Methods,
  args: any[]
|}>(
  'realm console.log call',
)

export const logs = createStore>([])

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 = {}
  //$off
  wrapper[$$observable] = store[$$observable]

import {createStore, createApi} from 'effector'
import {mediaMatcher} from '../mediaMatcher'

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'

//@flow

import {createStore} from "effector";

export const formInput = createStore("");
export const todos = createStore([]);

export const amount = todos.map(todos => {
  switch (todos.length) {
    case 0:
      return "no items";
    case 1:
      return "one todo";
    case 2:
      return "two todos";
    default:
      return "todos amount: " + todos.length;
  }
});