How to use effector - 10 common examples

// @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

// @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());

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

// @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)

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