Effector — State Manager You Should Give a Try

Hey guys! I know there was no posts from me for like a year or more. This year I was hard-working and hard-learning, my view has changed (yes, I use React now 😃)

Today I want to share the library I’ve discovered a half year ago and absolutely loved it!

This is Effector — application state manager that is the best match for my view on organizing business logic.

So let’s start from the idea and then I’ll show some simple example.

Core Concepts

• Decentralized stores > monolith store
  It’s much simpler to deal with simple stores and then combine them into shapes instead of divide the huge store into parts
• Stores should be as simple as possible
  You should not be scared by idea of adding one more store in your working app
• Intuitive API
  A small amount of the base principles is reused in different cases, reducing the entry treshold. If you know how .watch works in events, you probably already know what .watch does in stores etc.
• Move your business-logic out the view
  Let the components be simple like it’s “Getting started” example while Effector works on business-logic
• Exclude performance problems by design
  Effector is designed to notify only subjects to change. It guarantees that your app won’t be suddenly re-rendered by some minor state change
• No dependencies, framework-agnostic
  Effector does not depend on React, RxJS or whatever else. It only uses symbol-observable polyfill to be compatible with observables

Get started with Todo App

We like todos, right? So let’s make some stores.
I won’t do deep-dive into all the details but keep you up to date with things we use here.

Before start, install effector:

npm install effector effector-react
# or
yarn add effector effector-react

To create stores, use createStore function. 1st argument is the initial value
You can also create computed stores using store.map(cb) method

How to change the store state? Effector uses events for that
To create event, use createEvent function:

And, for this example we need one more thing — handle form submit.
I added one more event and at the end of code you can see one more watcher

So, our business-logic layer is ready. Time for view:

That’s all for todo for now, ’cause I want to leave it simple.
This example on Codesandbox: click here

What else?

Combining stores

Of course, you need to combine stores into shapes or do some custom combine.

Effector has combine for that

Example:

Effects

For side-effects like fetching data Effector has effects

• Effects are like events but they also have .use(cb) method which is called on call
• Effect also has effect.done and effect.fail events

Example:

Convert observables to events

I’m not RX fan but if you want, you can use fromObservable helper to convert observables to events

Thank you for reading this article. In the future I would like to write the series of posts with examples of how to solve things with Effector.
But if you know me, I’d better won’t make promises 😄

Project site: https://effector.now.sh
Project GitHub: https://github.com/zerobias/effector