- effector-vue@23.1.0Latest
- effector@23.2.3
- effector@23.2.2
- effector-react@23.2.1
- effector@23.2.1
- effector-react@23.2.0
- effector@23.2.0
- effector@23.1.0
- effector-react@23.1.0
- effector-react@23.0.1
- effector@23.0.0
- effector-react@23.0.0
- effector-vue@23.0.0
- effector-solid@0.23.0
- effector@22.8.8
- effector@22.8.7
- effector-react@22.5.4
- effector-react@22.5.3
- effector@22.8.6
- effector-react@22.5.2
- effector@22.8.5
- effector@22.8.4
- effector@22.8.3
- effector@22.8.2
- effector@22.8.1
- effector-react@22.5.1
- effector@22.7.0
- effector@22.6.2
- effector@22.6.1
- effector@22.6.0
- effector@22.5.2
- effector@22.5.1
- effector-react@22.5.0
- effector@22.5.0
- effector-solid@0.22.7
- effector-react@22.4.0
- effector@22.4.1
- effector@22.4.0
- effector-react@22.3.4
- effector-react@22.3.3
- effector-react@22.3.1
- effector-vue@22.2.0
- effector-react@22.3.0
- effector-solid@0.22.6
- effector-solid@0.22.5
- effector-react@22.2.0
- effector-solid@0.22.4
- effector-vue@22.1.2
- effector-solid@0.22.3
- forest@0.21.2
- effector-react@22.1.6
- effector-solid@0.22.2
- effector-react@22.1.5
- effector-react@22.1.1
- effector-react@22.1.0
- effector@22.3.0
- forest@0.21.1
- forest@0.21.0
- effector@22.2.0
- effector@22.2.0-rc.1
- effector-vue@22.1.0
- effector-react@22.0.6
- effector@22.1.2
- effector@22.1.1
- effector@22.1.0
- effector@22.0.0
- effector-react@21.3.3
- effector@21.8.12
- effector@21.8.1
- effector@21.8.2
- effector@21.8.3
- effector@21.8.4
- effector-vue@21.1.1
- effector@21.8.5
- effector@21.8.6
- effector@21.8.7
- effector@21.8.8
- effector@21.8.9
- effector@21.8.10
- effector@21.8.11
- effector-react@21.3.1
- effector-react@21.3.0
- effector@21.8.0
- effector-react@21.2.0
- effector-react@21.1.0
- effector@21.7.0
- effector@21.6.0
- effector@21.5.0
- effector@21.4.0
- 21.3.0
- v0.18.2
- v0.18.1
- v0.18.0
- v0.18.0-rc.2
- v0.18.0-beta.11
- v0.18.0-beta.10
- v0.17.6
- v0.17.4
- v0.16.1-beta.12
- v0.14.0
- effector@21.2.0
- effector@21.1.0
- effector@21.0.3
- effector@21.0.0
- effector@20.17.2
- effector@20.17.1
- effector@20.17.0
- effector@20.16.1
- effector@20.16.0
- effector@20.15.8
- effector@20.15.1
- effector@20.15.0
- effector@20.14.0
- effector@20.13.7
- effector@20.13.6
- effector@20.13.5
- effector@20.13.4
- effector@20.13.3
- effector@20.13.2
- effector@20.13.1
- effector@20.13.0
- effector@20.12.2
- effector@20.12.1
- effector@20.12.0
- effector@20.11.5
- effector@20.11.3
- effector@20.11.2
- effector@20.11.1
- effector@20.11.0
- effector@20.10.2
- effector@20.10.1
- effector@20.10.0
- effector@20.9.0
- effector@20.8.2
- effector@20.8.1
- effector@20.8.0
- effector@20.7.1
- effector@20.7.0
- effector@20.6.2
- effector@20.6.1
- effector@20.6.0
- effector@20.5.0
- effector@20.4.4
- effector@20.4.3
- effector@20.4.1
- effector@20.4.0
- effector@20.3.2
- effector@20.3.1
- effector@20.3.0
- effector@20.2.0
- effector@20.1.2
- effector@20.1.1
- effector@20.1.0
- effector@20.0.0
- effector@19.1.0
- effector@19.0.0
- effector@0.18.10
- effector@0.18.9
- effector@0.18.8
- effector@0.18.7
- effector@0.18.6
- effector@0.18.5
- effector@0.18.5-beta.6
- effector@0.18.5-beta.5
- effector@0.18.5-beta.4
- effector@0.18.5-beta.3
- effector@0.18.5-beta.2
- effector@0.18.5-beta.1
- effector@0.18.4
- effector@0.18.3-beta.1
- effector@0.18.1
- effector@0.18.0
- @effector/forms@0.0.1
- @effector/babel-plugin@0.5.0
- @effector/babel-plugin@0.4.0
- @effector/babel-plugin@0.3.0
- @effector/babel-plugin@0.2.0
- @effector/babel-plugin-react@0.2.1
- @effector/babel-plugin-react@0.2.0
- effector-vue@21.0.3
- effector-vue@21.0.0
- effector-vue@20.5.0
- effector-vue@20.4.2
- effector-vue@20.4.1
- effector-vue@20.4.0
- effector-vue@20.3.3
- effector-vue@20.3.2
- effector-vue@20.3.0
- effector-vue@20.2.1
- effector-vue@20.2.0
☄️ effector
The state manager
Table of Contents
- Introduction
- Installation
- Documentation
- Packages
- Articles
- Community
- Online playground
- DevTools
- Examples
- More examples
- API
- Support us
- Tested with browserstack
- Contributors
- License
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 plain 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
# or
yarn add effector
React
npm install --save effector effector-react
# or
yarn add effector effector-react
Vue
npm install --save effector effector-vue
# or
yarn add effector effector-vue
Svelte
Svelte works with effector out from a box, no additional packages needed. See word chain game application written with svelte and effector.
CDN
- https://unpkg.com/effector/effector.cjs.js
- https://unpkg.com/effector/effector.mjs
- https://unpkg.com/effector-react/effector-react.cjs.js
- https://unpkg.com/effector-vue/effector-vue.cjs.js
Documentation
For additional information, guides and api reference visit our documentation site
Packages
Package | Version | Size |
---|---|---|
effector |
||
effector-react |
||
effector-vue |
Articles
- Why I choose Effector instead of Redux or MobX
- Effector — State Manager You Should Give a Try
- Effector vs. Vuex. Which storage management is better for VueJS app?
- Powerful and fast state manager
- Testing api calls with effects and stores
- Effector’s beginner guide
Community
- awesome-effector a curated list of awesome effector packages, videos and articles
- Telegram (@effector_en)
- Telegram 🇷🇺 (@effector_ru)
- Gitter
- Add a GitHub Topic
effector
to your project’s home page
Online playground
You can try effector in our repl
Code sharing, Typescript and react supported out of the box. REPL repository
DevTools
Use effector-logger for printing updates to console, displaying current store values with ui or connecting application to redux devtools
Examples
Increment/decrement with React
import {createStore, createEvent} from 'effector'
import {useStore} from 'effector-react'
const increment = createEvent()
const decrement = createEvent()
const resetCounter = createEvent()
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>
</>
)
}
Hello world with events and nodejs
const {createEvent} = require('effector')
const messageEvent = createEvent()
messageEvent.watch(text => console.log(`new message: ${text}`))
messageEvent('hello world')
// => new message: hello world
Stores 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}`)
})
// for store watchs callback invokes immediately
// "status changed: offline"
turnOff() // nothing has changed, callback is not triggered
turnOn() // "status changed: online"
turnOff() // "status changed: offline"
turnOff() // nothing has changed
More examples
- Snake game (interactive A* algorithm visualisation) (source code)
- Ballcraft game (source code)
- Client-server interaction with effects Github
- Reddit reader With effects for data fetching and effector-react hooks
- Lists rendering With
useList
hook - Dynamic typing status
- Forward data between effects
- Range input component
- Modal dialog
- Conditional filtering
- Request cancellation
- Dynamic form fields, saving and loading from localStorage with effects
- Loading initial state from localStorage with domains
- Dynamic page selection with useStoreMap
- Update on scroll with
guard
- Night theme switcher component
- Computed bounce menu animation
- Values history
- Read default state from backend
- Requests cache
- Watch last two store state values
- Stores from react context Codesandbox
- Basic todolist example Codesandbox
- RealWorld app (RealWorld apps)
- Recent users projects
API
Event
Event is an intention to change state.
import {createEvent} from 'effector'
const send = createEvent() // unnamed event
const onMessage = createEvent('message') // named event
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)
})
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 fetchUserReposFx = createEffect(async ({name}) => {
const url = `https://api.github.com/users/${name}/repos`
const req = await fetch(url)
return req.json()
})
// subscribe to pending store status
fetchUserReposFx.pending.watch(pending => {
console.log(pending) // false
})
// subscribe to handler resolve
fetchUserReposFx.done.watch(({params, result}) => {
console.log(params) // {name: 'zerobias'}
console.log(result) // resolved value
})
// subscribe to handler reject or throw error
fetchUserReposFx.fail.watch(({params, error}) => {
console.error(params) // {name: 'zerobias'}
console.error(error) // rejected value
})
// subscribe to both cases
fetchUserReposFx.finally.watch(data => {
if (data.status === 'done') {
const {params, result} = data
console.log(params) // {name: 'zerobias'}
console.log(result) // resolved value
} else {
const {params, error} = data
console.error(params) // {name: 'zerobias'}
console.error(error) // rejected value
}
})
// you can replace handler anytime
fetchUserReposFx.use(requestMock)
// calling effect will return a promise
const result = await fetchUserReposFx({name: 'zerobias'})
Store
Store is an object that holds the state tree. There can be multiple stores.
// `getUsers` - is an effect
// `addUser` - is an event
const users = createStore([{ name: Joe }])
// subscribe store reducers to events
.on(getUsers.done, (oldState, payload) => payload)
.on(addUser, (oldState, payload) => [...oldState, payload]))
// subscribe to store updates
users.watch(state => console.log(state)) // `.watch` for a store is triggered immediately: `[{ name: Joe }]`
// `callback` will be triggered each time when `.on` handler returns the new state
Store composition/decomposition
Most profit thing of stores.
Get smaller part of the store:
// `.map` accept state of parent store and return new memoized store. No more reselect ;)
const firstUser = users.map(list => list[0])
firstUser.watch(newState => console.log(`first user name: ${newState.name}`)) // "first user name: Joe"
addUser({name: Joseph}) // `firstUser` is not updated
getUsers() // after promise resolve `firstUser` is updated and call all watchers (subscribers)
Compose stores:
import {createStore, combine} from 'effector'
const a = createStore(1)
const b = createStore('b')
const c = combine({a, b})
c.watch(console.log)
// => {a: 1, b: "b"}
See combine
in docs
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')
// => new event: main page/mount
const pageStore = mainPage.createStore(0)
// => new store: 0
See Domain
in docs
See also worker-rpc example, which uses shared domain for effects
Learn more
Support us
More articles about effector at patreon
Tested with browserstack
Contributors
Dmitry 💬 💻 📖 💡 🤔 🚇 ⚠️ |
andretshurotshka 💬 💻 📖 📦 ⚠️ |
Sergey Sova 📖 💡 💻 ⚠️ 🤔 |
Arutyunyan Artyom 📖 💡 |
Ilya 📖 |
Arthur Irgashev 📖 💻 💡 |
Igor Ryzhov 📖 💻 💡 |
Egor Guscha 📖 |
bakugod 📖 💡 |
Ruslan 📖 💻 🤔 ⚠️ |
Maxim Alyoshin 📖 |
Andrey Gopienko 📖 |
Vadim Ivanov 📖 |
Aleksandr Anokhin 💻 |
Anton Kosykh 💻 |
Konstantin Lebedev 💡 |
Pavel Tereschenko 💻 |
Satya Rohith 📖 |
Vladislav Melnikov 💻 |
Grigory Zaripov 💻 |
Marina Miyaoka 💻 |
Evgeny Zakharov 📖 |
Viktor 💻 📖 ⚠️ 🤔 |
Ivan Savichev 💻 🤔 |
Nikita Nafranets 📖 💡 |
Tauyekel Kunzhol 📖 |
Andrew Laiff 📖 |
Illia Osmanov 💻 🤔 |
Yan 📖 |
Egor Aristov 📖 |
Sozonov 📖 |
Rafael Fakhreev 💻 🤔 ⚠️ |
Victor 💻 🤔 📖 |
Dmitrij Shuleshov 📖 |
Valeriy Kobzar 💻 🚇 🤔 |
Ivan 💻 ⚠️ |
Aleksandr Osipov 📖 ⚠️ |
popuguy 📖 🚇 🤔 |