effector

The state manager

Explainer video
Explainer article
import {createEvent, createStore, createEffect, sample} from 'effector'
const nextPost = createEvent()
const getCommentsFx = createEffect(async postId => {
const url = `posts/${postId}/comments`
const base = 'https://jsonplaceholder.typicode.com'
const req = await fetch(`${base}/${url}`)
return req.json()
})
const $postComments = createStore([])
.on(getCommentsFx.doneData, (_, posts) => posts)
const $currentPost = createStore(1)
.on(getCommentsFx.done, (_, {params: postId}) => postId)
const $status = combine(
$currentPost, $postComments, getCommentsFx.pending,
(postId, comments, isLoading) => isLoading
? 'Loading post...'
: `Post ${postId} has ${comments.length} comments`
)
sample({
source: $currentPost,
clock: nextPost,
fn: postId => postId + 1,
target: getCommentsFx,
})
$status.watch(status => {
console.log(status)
})
// => Post 1 has 0 comments
nextPost()
// => Loading post...
// => Post 2 has 5 comments

Features

Type safe

Type safe

TypeScript and Flow support out of box.

Framework agnostic

Framework agnostic

Can work with any UI or server framework.

Developer-friendly

Developer-friendly

Simple API surface and helpful community.

Maximum performance

Maximum performance

Static initialization provides boost in performance for runtime.

Tiny bundle size

Tiny bundle size

Effector uses Rollup and Terser to provide small builds.

Plain javascript

Plain javascript

No decorators, no proxies, no classes required. Only you and your data.

Companies using effector

Sber
MTS
Raiffeisen Bank Russia
Avito
Docsvision
Okoo
REDMADROBOT
Junto
space307
StellarX
STM Labs
automation hero
Radity
Global CTO Forum
Want to appear on this page? Tell us