☄️ Effector

Reactive state manager

Table of Contents

• Motivation
• Installation
• About
  • Hello world with events and nodejs
  • Storages and events
• Demo
• Documentation
• Usage
  • Domain hooks
• Typings
• API
• Core types
• Contributors
• License

Motivation

At the start (early 2018) we had a lot of state-managers, those solve actual problems, but not elegant and with some limitations.

Effector tries to solve all [state-manager's] user problems and most parts of limitations. Primary:

• Developer-friendly, [static] type safe and inference, boilerplate free, insinuating API.
• Maximum update (state and subscribers) performance or minimum library performance cost by compile time / initial runtime computation.
• Modular, isomorphic, flexible.
• Tiny bundle size.

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

Basic example

SSR example

Documentation

• Glossary
• API Reference

Usage

import {createStore, createEvent} from 'effector'
import {createComponent} 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 = createComponent(counter, (props, counter) => (
  <>
    <div>{counter}</div>
    <button onClick={increment}>+</button>
    <button onClick={decrement}>-</button>
    <button onClick={resetCounter}>reset</button>
  </>
))

const App = () => <Counter />

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 📖 💡	Ilya 📖

License

MIT