Effector is a powerful and lightweight state management library for JavaScript applications. It provides a simple and predictable way to manage application state, with a focus on type safety and developer experience. Effector is framework-agnostic and can be used with React, Vue, or vanilla JavaScript.

Pros

• Excellent TypeScript support with strong type inference
• Lightweight and performant, with a small bundle size
• Framework-agnostic, can be used with any UI library or vanilla JS
• Clear and predictable data flow with event-driven architecture

Cons

• Steeper learning curve compared to some other state management solutions
• Smaller community and ecosystem compared to Redux or MobX
• Documentation could be more comprehensive, especially for advanced use cases
• Limited middleware support compared to Redux

Code Examples

Creating a store and an event:

import { createStore, createEvent } from 'effector'

const increment = createEvent()
const $counter = createStore(0)
  .on(increment, state => state + 1)

$counter.watch(state => console.log('Counter:', state))

increment() // Counter: 1
increment() // Counter: 2

Using Effector with React:

import { createStore, createEvent } from 'effector'
import { useStore } from 'effector-react'

const increment = createEvent()
const $counter = createStore(0).on(increment, state => state + 1)

const Counter = () => {
  const count = useStore($counter)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => increment()}>Increment</button>
    </div>
  )
}

Creating and combining effects:

import { createEffect, combine } from 'effector'

const fetchUserFx = createEffect(async (id) => {
  const response = await fetch(`https://api.example.com/users/${id}`)
  return response.json()
})

const fetchPostsFx = createEffect(async (userId) => {
  const response = await fetch(`https://api.example.com/posts?userId=${userId}`)
  return response.json()
})

const $userWithPosts = combine({
  user: fetchUserFx.doneData,
  posts: fetchPostsFx.doneData,
})

$userWithPosts.watch(console.log)

fetchUserFx(1)
fetchPostsFx(1)

Getting Started

To start using Effector in your project, first install it:

npm install effector

For React integration, also install:

npm install effector-react

Then, you can import and use Effector in your JavaScript or TypeScript files:

import { createStore, createEvent } from 'effector'

const increment = createEvent()
const $counter = createStore(0)
  .on(increment, state => state + 1)

$counter.watch(state => console.log('Counter:', state))

increment() // Counter: 1