☄️ Effector
Reactive state manager

Table of Contents
Introduction
Effector is an effective multi-store state manager for Javascript apps (React/React Native/Vue/Node.js), that allows you to manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good type support and high capacity API. Effector supports both TypeScript and Flow type annotations out of the box.
Effector follows five basic principles:
- Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
- Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
- Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and simple js objects
- Predictability and clarity of API - a small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
- The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.
Installation
npm install --save effector
yarn add effector
React
npm install --save effector effector-react
yarn add effector effector-react
Vue
npm install --save effector effector-vue
yarn add effector effector-vue
CDN
Packages
Web frameworks
Babel plugins
ReasonML/BuckleScript
Press
Online playground
You can try effector in our repl
Code sharing, Typescript and react supported out of the box; and of course, it built with effector
Examples
Increment/decrement with React
import {createStore, createEvent} from 'effector'
import {useStore} from 'effector-react'
const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')
const counter = createStore(0)
.on(increment, state => state + 1)
.on(decrement, state => state - 1)
.reset(resetCounter)
counter.watch(console.log)
const Counter = () => {
const value = useStore(counter)
return <div>{value}</div>
}
const App = () => {
const value = useStore(counter)
return (
<>
<Counter />
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={resetCounter}>reset</button>
</>
)
}
Run example
Hello world with events and nodejs
const {createEvent} = require('effector')
const messageEvent = createEvent()
messageEvent.watch(text => console.log(`new message: ${text}`))
messageEvent('hello world')
Run example
Storages and events
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()
Run example
More examples
API
Event
Event is an intention to change state.
import {createEvent} from 'effector'
const send = createEvent()
const onMessage = createEvent('message')
const socket = new WebSocket('wss://echo.websocket.org')
socket.onmessage = msg => onMessage(msg)
socket.onopen = () => send('{"text": "hello"}')
const onMessageParse = onMessage.map(msg => JSON.parse(msg.data))
onMessageParse.watch(data => {
console.log('Message from server ', data)
})
send.watch(data => {
socket.send(data)
})
Run example
Effect
Effect is a container for async function.
It can be safely used in place of the original async function.
import {createEffect} from 'effector'
const fetchUserRepos = createEffect({
async handler({name}) {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
},
})
fetchUserRepos.pending.watch(pending => {
console.log(pending)
})
fetchUserRepos.done.watch(({params, result}) => {
console.log(params)
console.log(result)
})
fetchUserRepos.fail.watch(({params, error}) => {
console.error(params)
console.error(error)
})
fetchUserRepos.finally.watch(data => {
if (data.status === 'done') {
const {params, result} = data
console.log(params)
console.log(result)
} else {
const {params, error} = data
console.error(params)
console.error(error)
}
})
fetchUserRepos.use(requestMock)
const result = await fetchUserRepos({name: 'zerobias'})
Run example
Store
Store is an object that holds the state tree. There can be multiple stores.
const users = createStore([{ name: Joe }])
.on(getUsers.done, (oldState, payload) => payload)
.on(addUser, (oldState, payload) => [...oldState, payload]))
users.watch(state => console.log(state))
Store composition/decomposition
Most profit thing of stores.
Get smaller part of the store:
const firstUser = users.map(list => list[0])
firstUser.watch(newState => console.log(`first user name: ${newState.name}`))
addUser({name: Joseph})
getUsers()
Compose stores:
import {createStore, combine} from 'effector'
const a = createStore(1)
const b = createStore('b')
const c = combine({a, b})
c.watch(console.log)
See combine
in docs
Run example
Domain
Domain is a namespace for your events, stores and effects.
Domain can subscribe to event, effect, store or nested domain creation with onCreateEvent, onCreateStore, onCreateEffect, onCreateDomain(to handle nested domains) methods.
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.createEvent('mount')
const pageStore = mainPage.createStore(0)
See Domain
in docs
Run example
See also worker-rpc example, which uses shared domain for effects
Learn more

Support us

Tested with browserstack

Contributors
License
MIT