☄️ Effector

Reactive state manager

![npm version](https://badge.fury.io/js/effector) ![Codeship Status for zerobias/effector](https://app.codeship.com/projects/288022) ![Build Status](https://semaphoreci.com/zerobias/effector)
![Join the chat at https://
.im/effector-js/community](https://gitter.im/effector-js/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
!PRs welcome
!License

- Introduction
- Effector follows five basic principles:
- Installation
- Packages
- Web frameworks
- Babel plugins
- ReasonML/BuckleScript
- Community
- Press
- Online playground
- Examples
- Increment/decrement with React
- Hello world with events and nodejs
- Storages and events
- More examples
- API
- Event
- Effect
- Store
- Store composition/decomposition
- Domain
- Learn more
- 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_.

$3

- 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

``sh npm install --save effector

`or`


yarn add effector


React

`sh npm install --save effector effector-react

`or`


yarn add effector effector-react

Vue

`sh npm install --save effector effector-vue

`or`


yarn add effector effector-vue


CDN
- https://unpkg.com/effector/effector.cjs.js
- https://unpkg.com/effector-react/effector-react.cjs.js
- https://unpkg.com/effector-vue/effector-vue.cjs.js
$3
#### Web frameworks

[effector]: https://github.com/zerobias/effector/tree/master/packages/effector [npm-effector]: https://img.shields.io/npm/v/effector.svg?maxAge=3600 [pack-effector]: https://npmjs.com/effector [deps-effector]: https://david-dm.org/zerobias/effector.svg?path=packages/effector [david-effector]: https://david-dm.org/zerobias/effector?path=packages/effector [size-effector]: https://img.shields.io/bundlephobia/minzip/effector [pho-effector]: https://bundlephobia.com/result?p=effector [effector-react]: https://github.com/zerobias/effector/tree/master/packages/effector-react [npm-react]: https://img.shields.io/npm/v/effector-react.svg?maxAge=3600 [pack-react]: https://npmjs.com/effector-react [deps-react]: https://david-dm.org/zerobias/effector.svg?path=packages/effector-react [david-react]: https://david-dm.org/zerobias/effector?path=packages/effector-react [size-react]: https://img.shields.io/bundlephobia/minzip/effector-react [pho-react]: https://bundlephobia.com/result?p=effector-react [effector-vue]: https://github.com/zerobias/effector/tree/master/packages/effector-vue [npm-vue]: https://img.shields.io/npm/v/effector-vue.svg?maxAge=3600 [pack-vue]: https://npmjs.com/effector-vue [deps-vue]: https://david-dm.org/zerobias/effector.svg?path=packages/effector-vue [david-vue]: https://david-dm.org/zerobias/effector?path=packages/effector-vue [size-vue]: https://img.shields.io/bundlephobia/minzip/effector-vue [pho-vue]: https://bundlephobia.com/result?p=effector-vue

#### Babel plugins

[@effector/babel-plugin]: https://github.com/zerobias/effector/tree/master/packages/%40effector/babel-plugin [npm-babel]: https://img.shields.io/npm/v/@effector/babel-plugin.svg?maxAge=3600 [pack-babel]: https://www.npmjs.com/package/@effector/babel-plugin [deps-babel]: https://david-dm.org/zerobias/effector.svg?path=packages/@effector/babel-plugin [david-babel]: https://david-dm.org/zerobias/effector?path=packages/@effector/babel-plugin [@effector/babel-plugin-react]: https://github.com/zerobias/effector/tree/master/packages/%40effector/babel-plugin-react [npm-babel-react]: https://img.shields.io/npm/v/@effector/babel-plugin-react.svg?maxAge=3600 [pack-babel-react]: https://www.npmjs.com/package/@effector/babel-plugin-react [deps-babel-react]: https://david-dm.org/zerobias/effector.svg?path=packages/@effector/babel-plugin-react [david-babel-react]: https://david-dm.org/zerobias/effector?path=packages/@effector/babel-plugin-react

#### ReasonML/BuckleScript

[bs-effector]: https://github.com/zerobias/effector/tree/master/packages/bs-effector [npm-bs]: https://img.shields.io/npm/v/bs-effector.svg?maxAge=3600 [pack-bs-effector]: https://npmjs.com/bs-effector [deps-bs]: https://david-dm.org/zerobias/effector.svg?path=packages/bs-effector [david-bs]: https://david-dm.org/zerobias/effector?path=packages/bs-effector [bs-effector-react]: https://github.com/zerobias/effector/tree/master/packages/bs-effector-react [npm-bs-react]: https://img.shields.io/npm/v/bs-effector-react.svg?maxAge=3600 [pack-bs-react]: https://npmjs.com/bs-effector-react [deps-bs-react]: https://david-dm.org/zerobias/effector.svg?path=packages/bs-effector-react [david-bs-react]: https://david-dm.org/zerobias/effector?path=packages/bs-effector-react

`Community`

- Twitter - Gitter - Telegram - Telegram 🇷🇺

`Press`

- Why I choose Effector instead of Redux or MobX - Effector — State Manager You Should Give a Try - Powerful and fast 5kb state manager

`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`

`$3`

`js 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

{value}


}
const App = () => {
  const value = useStore(counter)

return ( <> ) }`

Run example

`$3`

`js const {createEvent} = require('effector')

const messageEvent = createEvent()

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

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

Run example

`$3`

`js 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`

Run example

`More examples`

- Client-server interaction with effects Github - Reddit reader With effects for data fetching and effector-react hooks - Lists rendering WithuseListhook - Dynamic typing status - Range input component - Modal dialog - Conditional fitering - 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 withguard- 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?) - Real world projects Github

`API`

`$3`

Event is an intention to change state.

`js 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) })`

Run example

`$3`

Effect is a container for async function. It can be safely used in place of the original async function.

`js import {createEffect} from 'effector'

const fetchUserRepos = createEffect({ async handler({name}) { const url =https://api.github.com/users/${name}/reposconst req = await fetch(url) return req.json() }, })

// subscribe to pending store status fetchUserRepos.pending.watch(pending => { console.log(pending) // false })

// subscribe to handler resolve fetchUserRepos.done.watch(({params, result}) => { console.log(params) // {name: 'zerobias'} console.log(result) // resolved value })

// subscribe to handler reject or throw error fetchUserRepos.fail.watch(({params, error}) => { console.error(params) // {name: 'zerobias'} console.error(error) // rejected value })

// subscribe to both cases fetchUserRepos.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 fetchUserRepos.use(requestMock)

// calling effect will return a promise const result = await fetchUserRepos({name: 'zerobias'})`

Run example

`$3`

Store is an object that holds the state tree. There can be multiple stores.

`js //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 .onhandler returns the new state`

#### Store composition/decomposition

Most profit thing of stores.

Get smaller part of the store:

`js //.mapaccept 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}) // firstUseris not updated getUsers() // after promise resolvefirstUseris updated and call all watchers (subscribers)`

Compose stores:

`js 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

Run example

`$3`

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.

`js 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

Run example

> See also worker-rpc example, which uses shared domain for effects

$3

- Core concepts
- API docs
- Usage with TypeScript
- Glossary

!Effector Diagram

Support us

Tested with browserstack

![Tested with browserstack](https://BrowserStack.com)

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} 💻 🤔

License

MIT

☄️ Effector

Reactive state manager

Introduction

$3

Installation

``sh npm install --save effector

`or`


yarn add effector


React

`sh npm install --save effector effector-react

`or`


yarn add effector effector-react

Vue

`sh npm install --save effector effector-vue

`or`


yarn add effector effector-vue


CDN
- https://unpkg.com/effector/effector.cjs.js
- https://unpkg.com/effector-react/effector-react.cjs.js
- https://unpkg.com/effector-vue/effector-vue.cjs.js
$3
#### Web frameworks

#### Babel plugins

#### ReasonML/BuckleScript

`Community`

- Twitter - Gitter - Telegram - Telegram 🇷🇺

`Press`

- Why I choose Effector instead of Redux or MobX - Effector — State Manager You Should Give a Try - Powerful and fast 5kb state manager

`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`

`$3`

`js 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

{value}


}
const App = () => {
  const value = useStore(counter)

return ( <> ) }`

Run example

`$3`

`js const {createEvent} = require('effector')

const messageEvent = createEvent()

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

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

Run example

`$3`

`js 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`

Run example

`More examples`

`API`

`$3`

Event is an intention to change state.

`js 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) })`

Run example

`$3`

Effect is a container for async function. It can be safely used in place of the original async function.

`js import {createEffect} from 'effector'

const fetchUserRepos = createEffect({ async handler({name}) { const url =https://api.github.com/users/${name}/reposconst req = await fetch(url) return req.json() }, })

// subscribe to pending store status fetchUserRepos.pending.watch(pending => { console.log(pending) // false })

// subscribe to handler resolve fetchUserRepos.done.watch(({params, result}) => { console.log(params) // {name: 'zerobias'} console.log(result) // resolved value })

// subscribe to handler reject or throw error fetchUserRepos.fail.watch(({params, error}) => { console.error(params) // {name: 'zerobias'} console.error(error) // rejected value })

// you can replace handler anytime fetchUserRepos.use(requestMock)

// calling effect will return a promise const result = await fetchUserRepos({name: 'zerobias'})`

Run example

`$3`

Store is an object that holds the state tree. There can be multiple stores.

#### Store composition/decomposition

Most profit thing of stores.

Get smaller part of the store:

addUser({name: Joseph}) // firstUseris not updated getUsers() // after promise resolvefirstUseris updated and call all watchers (subscribers)`

Compose stores:

`js 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

Run example

`$3`

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

See Domain` in docs

Run example

> See also worker-rpc example, which uses shared domain for effects

$3

- Core concepts
- API docs
- Usage with TypeScript
- Glossary

!Effector Diagram

Support us

Tested with browserstack

![Tested with browserstack](https://BrowserStack.com)

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} 💻 🤔

License

MIT

@effector/canary

☄️ Effector

Table of Contents

Introduction

$3

Installation

or

or

or

$3

Community

Press

Online playground

Examples

$3

$3

$3

More examples

API

$3

$3

$3

$3

$3

Support us

Tested with browserstack

Contributors

License

@effector/canary

☄️ Effector

Table of Contents

Introduction

$3

Installation

or

or

or

$3

Community

Press

Online playground

Examples

$3

$3

$3

More examples

API

$3

$3

$3

$3

$3

Support us

Tested with browserstack

Contributors

License

`or`

`or`

`or`

`Community`

`Press`

`Online playground`

`Examples`

`$3`

`$3`

`$3`

`More examples`

`API`

`$3`

`$3`

`$3`

`$3`

`or`

`or`

`or`

`Community`

`Press`

`Online playground`

`Examples`

`$3`

`$3`

`$3`

`More examples`

`API`

`$3`

`$3`

`$3`

`$3`