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
TypeScript and Flow support out of box.
Framework agnostic
Can work with any UI or server framework.
Developer-friendly
Simple API surface and helpful community.
Maximum performance
Static initialization provides boost in performance for runtime.
Tiny bundle size
Effector uses Rollup and Terser to provide small builds.
Plain javascript
No decorators, no proxies, no classes required. Only you and your data.