Reactive state manager
npm install --save effector effector-react
Or using yarn
yarn add effector effector-react
Effector provides events and reactive storages for node.js and browsers
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
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
*/
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>
)
- 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
Effector supports both TypeScript and Flow type annotations out of the box.
import {
createEvent,
createEffect,
createDomain,
createStore,
createStoreObject,
} from 'effector'
See also Wiki
import type {Domain, Event, Effect, Store} from 'effector'
Dmitry 💬 💻 📖 💡 🤔 🚇 |
andretshurotshka 💬 💻 📖 📦 |
Sergey Sova 📖 💡 |
Arutyunyan Artyom 📖 💡 |
---|