Application state manager ☄️
Clone or download
Latest commit b31d730 Jan 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add issue template Nov 28, 2018
bench Update project setup May 23, 2018
examples Merge pull request #26 from zerobias/develop Dec 9, 2018
flow-typed Use types instead of interfaces in Rollup Dec 27, 2018
flow update project configs Dec 19, 2018
packages Version 0.18.0 Dec 30, 2018
rfc Merge pull request #26 from zerobias/develop Dec 9, 2018
scripts Remove drawGraph module Jan 18, 2019
src inline watch visitor Dec 30, 2018
tools Use rollup to compile builder Jan 18, 2019
.all-contributorsrc Add contributors list Dec 21, 2018
.babelrc__ Add Edge as build target Dec 27, 2018
.browserslistrc Add Edge as build target Dec 27, 2018
.eslintignore add builder to ignore Dec 27, 2018
.eslintrc Remove react-oriented eslint jsx rules Dec 27, 2018
.flowconfig add builder to ignore Dec 27, 2018
.gitattributes Add linguist colors to flow files Apr 8, 2018
.gitignore Unignore tools dir Dec 27, 2018
.nojekyll move docs to root Dec 21, 2018
.prettierrc Update styleguide Nov 30, 2018
CHANGELOG.md 0.18.0-beta.10 Aug 3, 2018
LICENSE Initial commit Jan 21, 2018
README.md move badges out from header Dec 21, 2018
babel.config.js Add Edge as build target Dec 27, 2018
bsconfig.json Add reason-react to bsconfig Dec 18, 2018
index.html move docs to root Dec 21, 2018
jest.config.js Add perf module Dec 29, 2018
jsconfig.json update project configs Dec 19, 2018
modules.dot Add generated scheme Jan 18, 2019
modules.png Add generated scheme Jan 18, 2019
package.json Update scripts Jan 18, 2019
publish-next.sh Add Ref datatype Jul 5, 2018
rollup.config.js Add example note to rollup config's method Dec 27, 2018
yarn.lock update deps Jan 18, 2019

README.md

☄️ Effector

Reactive state manager

npm version Codeship Status for zerobias/effector Build Status

Table of Contents

Installation

npm install --save effector effector-react

Or using yarn

yarn add effector effector-react

About

Effector provides events and reactive storages for node.js and browsers

Hello world with events and nodejs

repl

example file

const {createEvent} = require('effector')


const messageEvent = createEvent('message event (optional description)')

messageEvent.watch(text => console.log(`new message: ${text}`))

messageEvent('hello world')
// => new message: hello world

Storages and events

repl

example file

const {createStore, createEvent} = require('effector')

const turnOn = createEvent()
const turnOff = createEvent()

const status = createStore('offline')
  .on(turnOn, () => 'online')
  .on(turnOff, () => 'offline')

status.watch(newStatus => {
  console.log(`status changed: ${newStatus}`)
})

turnOff()
turnOn()
turnOff()
turnOff() // Will not trigger watch function because nothing has changed

/*
result:

status changed: offline
status changed: online
status changed: offline
*/

Demo

Edit Effector-react example Basic example

Edit Effector-react example SSR example

Wiki

Usage

import {
 createStore,
 createEvent,
 createEffect,
 createStoreObject,
} from 'effector'

import {createStoreConsumer} from 'effector-react'

const changeText = createEvent('change todo text')
const clickSave = createEvent('click save')
const toggleComplete = createEvent('toggle complete')
const resetForm = createEvent('reset form')
const addTodo = createEvent('add todo')
const fetchSaveTodo = createEffect('save request')

const todos = createStore([]).on(fetchSaveTodo.done, (state, {params}) => [
 ...state,
 params,
])

const text = createStore('').on(changeText, (_, newText) => newText)
const complete = createStore(false).on(toggleComplete, complete => !complete)

const form = createStoreObject({
 text,
 complete,
}).reset(resetForm)

const FormStore = createStoreConsumer(form)

const Form = () => (
 <FormStore>
  {form => (
   <form onSubmit={resetForm}>
    <input type="text" onChange={e => changeText(e.currentTarget.value)} />
    <button onClick={resetForm}>reset</button>
   </form>
  )}
 </FormStore>
)

Domain hooks

  • onCreateEvent
  • onCreateEffect
  • onCreateStore
  • onCreateDomain (to handle nested domains)
import {createDomain} from 'effector'
const mainPage = createDomain('main page')
mainPage.onCreateEvent(event => {
 console.log('new event: ', event.getType())
})
mainPage.onCreateStore(store => {
 console.log('new store: ', store.getState())
})
const mount = mainPage.event('mount')
// => new event: main page/mount

const pageStore = mainPage.store(0)
// => new store: 0

Typings

Effector supports both TypeScript and Flow type annotations out of the box.

API

import {
 createEvent,
 createEffect,
 createDomain,
 createStore,
 createStoreObject,
} from 'effector'

See also Wiki

Core types

import type {Domain, Event, Effect, Store} from 'effector'

Contributors


Dmitry

💬 💻 📖 💡 🤔 🚇 ⚠️

andretshurotshka

💬 💻 📖 📦 ⚠️

Sergey Sova

📖 💡

Arutyunyan Artyom

📖 💡

License

MIT