egorguscha/effector

The state manager ☄️

☄️ effector

The state manager

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

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

npm install effector

React

npm install effector effector-react

Vue

npm install effector effector-vue

Svelte

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

CDN

• https://unpkg.com/effector/effector.cjs.js
• https://unpkg.com/effector/effector.mjs
• https://unpkg.com/effector-react/effector-react.cjs.js
• https://unpkg.com/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

Community

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

Online playground

You can try effector in our repl

Code sharing, Typescript and react supported out of the box. REPL 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

More articles about effector at patreon

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 💻 🤔
Yan 📖	Egor Aristov 📖	Sozonov 📖	Rafael Fakhreev 💻 🤔 ⚠️	Victor 💻 🤔 📖	Dmitrij Shuleshov 📖	Valeriy Kobzar 💻 🚇 🤔
Ivan 💻 ⚠️	Aleksandr Osipov 📖 ⚠️	popuguy 📖 🚇 🤔	uulaal 💻	Viktor Pasynok 🚇 💻 ⚠️