Kelin2025

name: Docs
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    name: Build docs

Kelin2025

import { combine } from 'effector'

const $name = createStore('Anton')
const $surname = createStore('Kosykh')

// Creates a store with an object of stores states
const $profile = combine({
  name: $name,
  surname: $surname
})

Kelin2025

export const NameField = createField({
  view: ({ value, onChange }) => <Input value={value} onChange={onChange} />
})

Kelin2025

const $names = createStore([])
const $completed = createStore([])

const $todos = combine(
  $names, 
  $completed, 
  (names, completed) => names.map((name, i) => ({ name, completed: completed[i] })
)
  
$names

Kelin2025

import { interval } from 'rxjs'
import { fromObservable } from 'effector'

//emit value in sequence every 1 second
const tick = interval(1000)

const tickEvent = fromObservable(tick)

//output: 0,1,2,3,4,5....
tickEvent.watch(console.log)

Kelin2025

import { combine, createStoreObject } from 'effector'

const $name = createStore('Anton')
const $surname = createStore('Kosykh')

// createStoreObject creates store with object of stores states
const $profile = createStoreObject({
  name: $name,
  surname: $surname
})

Kelin2025

import { createStore, createEffect } from 'effector'

const getPost = createEffect('Fetch posts')

const $isLoading = createStore(false)
const $post = createStore(null)
const $error = createStore(null)

$isLoading
  .on(getPost, () => true)

Kelin2025

import React from 'react'
import { useStore } from 'effector-react'

import { $todo, $todos, submitPressed, inputChanged, todoToggled, todoRemoved } from './stores'

export const TodoInput = () => {
  // Use useStore(store) hook to get the state
  // And update the component on state changes
  const todo = useStore($todo)
  

Kelin2025

import { createStore, createEvent } from 'effector'

const inputChanged = createEvent('Input changed')
const todoAdded = createEvent('Todo added')
const todoRemoved = createEvent('Todo removed')
const todoToggled = createEvent('Todo toggled')
// We added one more event here
const submitPressed = createEvent('Submit pressed')

const $todo = createStore('')

Kelin2025

import { createStore, createEvent } from 'effector'

// Create events
const inputChanged = createEvent('Input changed')
const todoAdded = createEvent('Todo added')
const todoRemoved = createEvent('Todo removed')
const todoToggled = createEvent('Todo toggled')

const $todo = createStore('')
const $todos = createStore([])