effector / effector

Business logic with ease ☄️

☄️ effector

Business logic with ease

Visit effector.dev for docs, guides and examples

Table of Contents

• Introduction
  • Effector follows five basic principles:
• Installation
• Documentation
• Packages
• Articles
• Community
• Online playground
• DevTools
• More examples in documentation
• Learn more
• Support us
• Contributors

Introduction

Effector implements business logic with ease for Javascript apps (React/React Native/Vue/Svelte/Node.js/Vanilla), allows you to manage data flow in complex applications. Effector provides best TypeScript support 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

You can use any package manager

npm add effector

React

To getting started read our article how to write React and Typescript application.

npm add effector effector-react

SolidJS

npm add effector effector-solid

Vue

npm add effector effector-vue

Svelte

Svelte works with effector out of the box, no additional packages needed. See word chain game application written with svelte and effector.

CDN

• https://www.jsdelivr.com/package/npm/effector
• https://cdn.jsdelivr.net/npm/effector/effector.cjs.js
• https://cdn.jsdelivr.net/npm/effector/effector.mjs
• https://cdn.jsdelivr.net/npm/effector-react/effector-react.cjs.js
• https://cdn.jsdelivr.net/npm/effector-vue/effector-vue.cjs.js

Documentation

For additional information, guides and api reference visit our documentation site

Packages

• 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
• The best part of Effector

Community

• official
• awesome-effector a curated list of awesome effector packages, videos and articles
• Twitter
• Telegram (@effector_en)
• Telegram 🇷🇺 (@effector_ru)
• dev.to
• Discord
• Add a GitHub Topic effector to your project's home page

Online playground

You can try effector with online playground

Code sharing, Typescript and react supported out of the box. Playground repository

DevTools

Use effector-logger for printing updates to console, displaying current store values with ui or connecting application to familiar redux devtools

---

More examples in documentation

Learn more

• Glossary
• Usage with TypeScript
• API docs
• Changelog

Support us

• Read more articles on a patreon page
• Donate on OpenCollective
• Be a sponsor on Github Sponsors

Your support allows us to improve the developer experience 🧡.

Contributors

Dmitry	andretshurotshka	Sova	Alexander Khoroshikh	popuguy	Igor Kamyşev
Egor	Valeriy Kobzar	Yan	Ruslan @doasync	Illia Osmanov	mg901
Igor Ryzhov	Arthur Irgashev	Viktor	Ilya	Ainur	Arutiunian Artem
Dmitrij Shuleshov	Nikita Nafranets	Ivan Savichev	Aleksandr Osipov	Зухриддин Камильжанов	bakugod
Victor Didenko	Viktor Pasynok	Kirill Mironov	Andrei	Ivan	Bohdan Petrov
sergey20x25	Ivanov Vadim	Tauyekel Kunzhol	Victor	Vladimir Ivakin	Aldiyar Batyrbekov
cqh	xaota	☃︎	Andrei Antropov	Mikhail Kireev	Stanislav
Sozonov	Samir	Renat Sagdeev	Kirill	Denis Sikuler	Arsen-95
Anton Yurovskykh	Aleksandr Belov	Anton Kosykh	Usman Yunusov	vadimfilimonov	Vasili Sviridov
Vasili Svirydau	Victor Kolb	Vladislav Melnikov	Vladislav Botvin	The Gitter Badger	Shiyan7
Sergey Belozyorcev	Satya Rohith	Roman	Robert Kuzhin	Raman Aktsisiuk	Rachael Dawn
Will Heslam	Rasul	Yesset Zhussupov	Anatoly Kopyl	ansunrisein	Stanislav
dmitryplyaskin	Grigory Zaripov	Houston (Bot)	ilfey	kanno	Kirill Leushkin
Marina Miyaoka	roman	vladthelittleone	xxxxue	0xflotus	Abdukerim Radjapov
7iomka	Abel Soares Siqueira	Aleksandr Grigorii	Alex Arro	Aleksei Pudnikov	Alex Anokhin
Alexander	Александр	Ayu	Dennis Maush	Denis Skiba	Dmitry Dudin
Ed Prince	Gabriel Husek	Ilya Martynov	Infant Frontender	Ivan	Jan Keromnes
Jesse Jackson	Joel Bandi	Lebedev Konstantin	Leniorko	Ludovic Dem	Nikita Svoyachenko
Mike Cann	Oleg	Oleh	Pasha Grekovich	bigslycat

effector's Issues

How to subscribe to a Promise result?

// like that...
        function sleep(): Promise<string> {
            return new Promise<string>(resolve => setTimeout(() => 'on', 1000));
        }

        const turnOn = domain.effect<void, string, Error>()
            .use(async  _ => await sleep());

         // subscribe to Promise
        const status = domain.store<string>('off')
            .on(turnOn, (state, payload, result, error) => result);

        turnOn();

What's the most convenient way to get Promise Result?

Describe motivation for creating or using this library

Currently README.md doesn't answer the most important questions:

1. What could be the user's motivation for using this library?
2. What's the difference between this library and a very similar (at a glance) and extremely popular library MobX?
3. (optional) What was the author's motivation for creating this library? For example, Redux was created to support middleware and time-travel, MobX was inspired by Proxy API, etc.

So far, all I see are code examples, that look very similar to MobX

Future doesn't extends Promise

Code to reproduce the issue:

const m = createDomain()
const eff = m.effect('1')
const eff2 = m.effect('2')

eff.use(() => eff2())
eff2.use(() => Promise.resolve())

eff().promise() // future
eff().promise().promise() // promise

https://codesandbox.io/s/54kvmqk43x

Expected behavior:

• Future extends Promise
• .promise() returns real Promise (or becomes obsolete)

Actual behavior:

• Future doesn't extends Promise
• .promise() doesn't return real Promise, but thenable
• Future is just thenable

Versions of packages used:

"effector": "^0.18.0-beta.11",
"effector-react": "^0.18.0-beta.11",

Add real world examples

Examples - is the best way to understand the library.
Some examples already could be found in readme or in tests(🤓) but could be better.

Gate default state is {}, but i can create non-object Gate

It's possible to create non-object Gate:

const NumberGate = createGate<number>('number');
...
const Component = () => {
  useGate(NumberGate, 1)
}

and receive some runtime error after that,

NumberGate.state.watch((value) => {
  console.log(value * 2);
})

which will not be detected with type-checking, because value type is number | null and value can be {}.

Missing/Incorrect APIs

Relevant documentation

createGate

website: JSON linting

Expected behavior:
Valid JSON should not be highlighted as invalid.
Actual behavior:
JSON is validated as JavaScript which produces a syntax error.

Add more sugar for store composition (combining)

Combine function looks very ugly when you need to compose some stuff into another store, usually you just need to combine two or more stores into another object.
I suggest the following api

function compute<A, B, C, ...>(storeA: A, StoreB: B, storeC: C, aggregateObject: //aggregated type );
const data = computed(todosLen, {
  completedTodoCount,
 // this is computed value where todos len is value from the store in first argument
// all the next  passed  stores will be passed as next arguments as well
  isLenEvent: (todosLen) => todosLen%2 === 0
});

function compute takes stores as arguments and aggregate object as last argument.
This object takes either store, either function for computed value

const filterItems = (entities, search) => {
  return filter(entities, item => item && item.name
}

computed(entities, searchText, {
  filteredItems: filterItems
})

createEffect doesn't resolve void Params

I have this code:

const handler = () => console.log();

const effect = createEffect('', {handler});

effect();

I got TS2554: Expected 1 arguments, but got 0. An argument for payload was not provided

So, I have to manually declare effect typings like this:

const effect = createEffect<void, void, any>('', {handler});

Or write wrappers:

const createBetterEffect = <Params = void, Done = any>(
  name?: string,
  options?: {handler?: (() => Done | Promise<Done>) | ((p: Params) => Done | Promise<Done>)},
) =>
  createEffect<Params, Done, string>(name, options);

I want createEffect to correctly infer void type of Params

---

IssueHunt Summary

goodmind has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #189 Fix createEffect TypeScript type with void parameter

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Nicer typings for createApi()

For now createApi() doesn't let you to work with events without payload or with optional payload:

const api = createApi(store, {
    increment: (count) => count + 1,
    decrement: (count) => count - 1,
    double: (count) => count * 2,
    multiply: (count, mp = 2) => count * mp,

});

api.double(); // Expected 1 arguments, but got 0.
api.multiply(); // Expected 1 arguments, but got 0.

Can't set undefined value in store

Code to reproduce the issue:
https://codesandbox.io/s/lp1roln39q
Expected behavior:
Should reset value to undefined
Actual behavior:
Does not resets value in store
Versions of packages used:
0.18.2

typescript react typings

Code to reproduce the issue:
here and further
https://github.com/zerobias/effector/blob/master/packages/effector-react/index.d.ts#L16

Expected behavior:
typescript uses React.ReactNode type

Actual behavior:
React.Node, which not exists in typescript's react typings

Versions of packages used:
0.18.0

Usage with React-Native

Effector is being fully supported by React-Native, which is a good thing to be shown

---

IssueHunt Summary

mikaoelitiana has been rewarded.

Backers (Total: $100.00)

• issuehunt ($100.00)

Submitted pull Requests

• #154 Add react-native usage example

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

How i can load previously saved state snapshot?

For example, I saved the current state of the repository in localStorage, and I want to restore the state after the user push button "restore last state". I do not understand from the documentation, is it possible?

`store.on(event ...` should replace previous reducer for that event

Why is the watch not triggered?

I don't understand why the watch is not triggerd when I just return a modified state object in the on function. Here's a code example: https://codesandbox.io/s/2n8j00mq0. Please can somebody explain why this is not working? :) Thanks!

Compatibility with old engines

What old version of FF is supported by framework?

Selector own props

I know you can use $store.map to select part of a store but what if I need to select a part of a store using a parameter. Example:

const $data = createStore({"alex": {age: 20, name: "Alex}, "john": {age: 30, name: "John"}})

if I have and cont id = "alex" in a component somewhere is there a use to select only alex data and get the update if that is changing ?

Using reselect I could do something like:

const getVisibilityFilter = (state, props) => state.todoLists[props.listId].visibilityFilter

Improve createComponent

Please, add optional initial callback to createComponent

Example:

createComponent(
  initialProps => store.map(state => state[initialProps.id]),
  Component
)

event.prepend(...) doesn't work with undefined

Code to reproduce the issue:

import { createEvent } from 'effector'

const click = createEvent()
click.watch(console.log)

const preclick = click.prepend(n => n)

preclick()

Expected behavior:

undefined in console

Actual behavior:

click.watch doesn't get called

Versions of packages used:

0.18.1

effector-vue documentation is missing

https://github.com/zerobias/effector/tree/master/docs/api/effector-vue

---

IssueHunt Summary

goodmind has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #198 effector-vue docs

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Effector size

The current Effector size is 5 KB.

It is a lot 100 ms just to download (and about 100 ms to parse and execute JS).

Especially, when Redux is 2 KB and other Redux-like stores could be 200-600 B.

Diamond problem with subscribers

const clickButton = createEvent()
const closeModal = createEvent()

forward({
  from: clickButton,
  to: closeModal,
})

const lastEvent = createStore(null)
  .on(clickButton, () => 'click')
  .on(closeModal, () => 'modal')

lastEvent.watch(data => {
  // here we need everything
  sendAnalytics(data)
})

lastEvent.watch(data => {
  //here we need only final value
  render(data)
})

Here we are expecting two different behaviours: sendAnalytics need updates about both events calls, but render expect only last relative data.

effector-react: Remove unused import

https://github.com/zerobias/effector/blob/5cde4409d74d5e95366359ad73ac592fbe6f02bf/src/react/createReactState.js#L5

Usage with TypeScript is missing

https://effector.now.sh/en/recipes/usage-with-typescript

---

IssueHunt Summary

laiff has been rewarded.

Backers (Total: $100.00)

• issuehunt ($100.00)

Submitted pull Requests

• #160 #145 Add section usage with Typescript

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Usage with NextJS SSR

Hi there,

Unfortunately, I am still kinda new when it comes to SSR and I was wondering if you have any examples/extensions/ideas on how to use Effector(-React) with NextJS.

I would appreciate any support.

Thank you!

TS typings for Effect

Add typing for effect.map

Source maps acts like application roots

Code to reproduce the issue:
See Chrome DevTools at https://csb-m3yrnznpo8-znzkmferhr.now.sh/
Sources:
https://codesandbox.io/s/m3yrnznpo8

Expected behavior:
Like in symbol-observable library: place our maps in node_modules

Actual behavior:
src folder in application root

Versions of packages used:
0.18.0-rc.1

Add Vue bindings

I can help with Vue bindings 'cause I want to try it on my side-projects (:

Remove broken link to Unit in sample documentation

Link to Unit page in the documentation leads to nowhere and has been added by mistake, we need to remove it

---

IssueHunt Summary

satyarohith has been rewarded.

Backers (Total: $6.00)

• zerobias ($1.00)
• issuehunt ($5.00)

Submitted pull Requests

• #150 [docs] Remove broken links

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Compatibility with TV browser (Chrome 47)

Hi,
crafting an application with create-react-app, and installing effector/effector-react, in the main file and importing any effector/effector-react functions, the live preview in dev mode returns the following on Chrome 47:

Unexpected token {

effector 20.0.0/effector-react 20.0.4

Thank you

---

IssueHunt Summary

zerobias has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #159 Effector20.1.0

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Add effector to window in all site pages

Please add effector public API to window in all site(https://effector.now.sh.sh) pages for the option to testing in DevTools console.

Typescript typings for sample

Sample typings is incomplete for config case.

const source = createStore<string>('')
const event = createEvent<number>()

const target = createEvent<number>()

// Fine
const case1 = sample(source, event, (a, b) => 1)

const store = createStore<number>()
const event2 = createEvent<string>()
// Should be Event<number>, not Event<string>
const case1bug = sample(event2, store, (a,b) => 1)

// No errors, but case2 should be Event, not Unit
// It doesn't matter tho, because we can use methods of target
const case2 = sample({
  source,
  clock: event,
  fn: (a, b) => 1,
  target
})
// TS complains about arguments of fn
// TS7006: Parameter 'a' implicitly has an 'any' type.
// TS7006: Parameter 'b' implicitly has an 'any' type.
const case3 = sample({
  source,
  clock: event,
  fn: (a, b) => 1
})

// And case3 is completely useless, because it has Unit type
// TS2339: Property 'filterMap' does not exist on type 'Unit<number>'.
case3.filterMap(a => a === 1 ? a : undefined)
// Can't cast it
// TS2740: Type 'Unit<number>' is missing the following properties from type 'Event<number>': watch, map, filter, filterMap, and 5 more.
const t: Event<number> = case3

Missed computation in `getState` for store without subscribers

Simple example: https://effector.now.sh/try?version=0.18.3-beta.1&code=MYewdgzgLgBApgNzmWBeGwBOcCGU4CiSKAFAJQBQFoks0I2AjDOlrvgMpQNwkBmOADYQ4lAJAA6cCUTIoAGhjkWAPhhRMAV1EBuKjWgx62AEwsM2PHC49+QkeKlgSxuI0XLUajdsoUA9P7wxFDkVACWfEquJhIA5nBQXFbKAISo6D6i6gAWmCAA7jBgcEUEmPmYJADkALLhECIAJhggALYADppQeOHg1WRAA

restore function doesn't work in REPL

Code to reproduce the issue:

const foo = createEvent()
const bar = restore(foo, null)

Expected behavior:

No errors

Actual behavior:

Try Effector crashes

Versions of packages used: master

https://effector.now.sh/try/

To reset saved code remove it from localStorage

---

IssueHunt Summary

laiff has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #151 #149 Fix crash in try environment while use restore

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Add ability to clone store

Use case: many instances of the same app

Empty error description in repl console

Code to reproduce the issue:
https://effector.now.sh/try?version=develop&code=MYewdgzgLgBApgNzmWBeGwBOcCGU4CiSKAFAJQBQFiyUAdAO57AAWJ5MqAfDAN4xQWmEAxhg4ogpmGYSAcnzQY0TAEswAczlkYAX0rViUckA

Versions of packages used:
repl develop at Mon Mar 25 2019 07:27:18 GMT+0300 (Moscow Standard Time)

Add documentation

Lets track this issue.

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

An unsubscribed event may change store state

Code to reproduce the issue:
state changes even after the event was unsubscribed

Expected behavior:
If you do store.off(event) it should unsubscribe any handlers for the event

Actual behavior:
If you subscribed a store to the same event more than once using .on(event, handler),
calling .off(event) does not guarantee that the event won't affect store again.
If you call the event, the state of the store may be changed, because only the very last event handler (reducer) is unsubscribed. It wouldn't be an issue if a new reducer replaced the previous one for the same event (#8)

Versions of packages used:
Effector v0.18.4

Better migration guide from Redux

https://effector.now.sh/en/recipes/migrating-to-effector/from-redux

---

IssueHunt Summary

Backers (Total: $40.00)

• issuehunt ($40.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

TS typings for sample

Add TS typings for sample(store).

Usage with Flow is missing

Similar to https://effector.now.sh/en/recipes/usage-with-typescript

Throw in reducer is not cancel computation of other reducers

If someone forwarded you here, this is an outdated discussion which can not and must not be used as proof of the issues of any kind.

Calling of pure function cannot be detected by definition, thereby preventing from using them in a suggested way
That is, the inability to throw an exception is what make functions pure.
And that is what effects were being made for: effect is a function, which might throw an exception, which triggers a fail branch, which you can subscribe on.

Reducers in .on, functions in .map are pure. You shall not branch them by throwing exceptions. This is not an issue, this is what makes computations predictable and stable.

Original issue:

Code to reproduce the issue:
repl

Expected behavior:
Throw all computation

Actual behavior:
Receive wrong data

Versions of packages used:
0.18.16

Visualization for stores, events and relationships

Do you have some library for visualization store in browser, like redux-devtools-extensions or like desktop Reactotron

---

IssueHunt Summary

Backers (Total: $100.00)

• issuehunt ($100.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Usage with Node.js is missing

https://effector.now.sh/en/recipes/recipes

Better Try Effector experience on mobile devices

https://effector.now.sh/try
https://github.com/zerobias/effector/tree/master/website/editor

iOS is priority

---

IssueHunt Summary

Backers (Total: $40.00)

• issuehunt ($40.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

An effect handler is not called when you use `forward`

Code to reproduce the issue:
try

Expected behavior:
I expect an effect handler to be called when you forward to the effect

Actual behavior:
The effect is called itself but not the handler when foward is used

Versions of packages used:
Effector v0.18.4

ERROR Compiled - Cannot find name 'E' in effector/index.d.ts

Code to reproduce the issue:

57:57 Cannot find name 'E'.
    55 |     handler: (state: State, payload: E) => State | void,
    56 |   ): this
  > 57 |   off(event: Event<any> | Effect<any, any, any> | Store<E>): void
       |                                                         ^
    58 |   subscribe(listner: any): Subscription
    59 |   watch<E>(
    60 |     watcher: (state: State, payload: E, type: string) => any,

Versions of packages used: 0.18.2

? maybe =>

export type E = any;

Migration guide from MobX is missing

Similar to https://effector.now.sh/en/recipes/migrating-to-effector/from-redux

TS types for combine

Add types for combine(object) and combine(tuple)

ReasonML documentation is missing

Documentation around
http://npmjs.com/bs-effector
http://npmjs.com/bs-effector-react
is missing

https://effector.now.sh/en/api/effector/effector