Effector

Reactive state manager

README

Effector Comet Logo

join gitter rate on openbase build status discord chat become a patron



☄️ effector


Business logic with ease

Visit effector.dev for docs, guides and examples


Table of Contents








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


with pnpm
  1. ```sh
  2. pnpm add effector
  3. ```

with yarn
  1. ```sh
  2. yarn add effector
  3. ```

with npm
  1. ```sh
  2. npm add effector
  3. ```

React

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

with pnpm
  1. ```sh
  2. pnpm add effector effector-react
  3. ```

with yarn
  1. ```sh
  2. yarn add effector effector-react
  3. ```

with npm
  1. ```sh
  2. npm add effector effector-react
  3. ```

Vue

with pnpm
  1. ```sh
  2. pnpm add effector effector-vue
  3. ```

with yarn
  1. ```sh
  2. yarn add effector effector-vue
  3. ```

with npm
  1. ```sh
  2. npm add effector effector-vue
  3. ```

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



Articles



Community


- awesome-effector a curated list of awesome effector packages, videos and articles
- Telegram (@effector_en)
- Telegram 🇷🇺 (@effector_ru)
- Add a [GitHub Topic effector](https://github.com/topics/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



Support us


- Read more articles on a patreon page
- Be a sponsor on Github Sponsors

Your support allows us to improve the developer experience 🧡.

Contributors


Dmitry/
Dmitry
andretshurotshka/
andretshurotshka
Sergey
Sergey Sova
popuguy/
popuguy
Alexander
Alexander Khoroshikh
Egor/
Egor
Valeriy
Valeriy Kobzar
Ruslan
Ruslan @doasync
Illia
Illia Osmanov
Igor
Igor Kamyşev
Yan/
Yan
Maxim/
Maxim
Igor
Igor Ryzhov
Arthur
Arthur Irgashev
Viktor/
Viktor
Ilya/
Ilya
Arutiunian
Arutiunian Artem
Dmitrij
Dmitrij Shuleshov
Nikita
Nikita Nafranets
Ivan
Ivan Savichev
Aleksandr
Aleksandr Osipov
bakugod/
bakugod
Victor
Victor Didenko
Viktor
Viktor Pasynok
Andrei/
Andrei
Kirill
Kirill Mironov
Ivan/
Ivan
Ivanov
Ivanov Vadim
Aleksandr
Aleksandr Belov
Anton
Anton Yurovskykh
Denis
Denis Sikuler
Renat
Renat Sagdeev
Samir/
Samir
Sozonov/
Sozonov
Stanislav/
Stanislav
Tauyekel
Tauyekel Kunzhol
Aldiyar
Aldiyar Batyrbekov
cqh/
cqh
xaota/
xaota
Andrey
Andrey Antropov
0xflotus/
0xflotus
Abdukerim
Abdukerim Radjapov
7iomka/
7iomka
Abel
Abel Soares Siqueira
Aleksandr
Aleksandr Grigorii
Alex
Alex Arro
Aleksei
Aleksei Pudnikov
Alek
Alek Anokhin
Alexander/
Alexander
Alexandrsv/
Alexandrsv
Anton
Anton Kosykh
rymarchikbot/
rymarchikbot
Ayu/
Ayu
Denis
Denis Maushov
Denis
Denis Skiba
Dmitry
Dmitry Dudin
Ed
Ed Prince
Egor
Egor Gorbachev
Gabriel
Gabriel Husek
Infant
Infant Frontender
Ivan/
Ivan
Jan
Jan Keromnes
Jesse
Jesse Jackson
Joel
Joel Bandi
Paul
Paul Ekshmidt
Lebedev
Lebedev Konstantin
Ludovic
Ludovic Dem
Mike
Mike Cann
Oleg/
Oleg
Oleh/
Oleh
Pasha
Pasha Grekovich
bigslycat/
bigslycat
Rachael
Rachael Dawn
Raman
Raman Aktsisiuk
Robert
Robert Kuzhin
Satya
Satya Rohith
Sergey
Sergey Belozyorcev
The
The Gitter Badger
Usman
Usman Yunusov
Vadim
Vadim Filimonov
Vasili
Vasili Sviridov
Vasili
Vasili Svirydau
Victor/
Victor
Victor
Victor Kolb
Vic/
Vic
Vladislav
Vladislav Melnikov
Vladislav
Vladislav Botvin
Will
Will Heslam
Rasul
Rasul
Yesset/
Yesset
Anatoly
Anatoly Kopyl
Stanislav/
Stanislav
dmitryplyaskin/
dmitryplyaskin
Grigory
Grigory Zaripov
kanno/
kanno
Kirill
Kirill Leushkin
Marina
Marina Miyaoka
roman/
roman
Evgeny
Evgeny Zakharov
vladthelittleone/
vladthelittleone
xxxxue/
xxxxue
Tested with browserstack