Quick start with Effector

Effector is a powerful state manager that offers a fundamentally new approach to data management in applications. Unlike traditional solutions where state is changed directly through actions, Effector uses a reactive and declarative approach.

Effector Features

Effector is reactive 🚀: Effector automatically tracks dependencies and updates all related parts of the application, eliminating the need to manually manage updates.
Declarative code 📝: You describe the relationships between data and their transformations, while Effector takes care of how and when to perform these transformations.
Predictable testing ✅: Isolated contexts make testing business logic simple and reliable.
Flexible architecture 🏗️: Effector works equally well for both small applications and large enterprise systems.
Versatility 🔄: While Effector integrates perfectly with popular frameworks, it can be used in any JavaScript environment.

More about effector core concepts you can read here

Install effector

To get started, install Effector using your favorite package manager:

npm install effector

yarn install effector

pnpm install effector

Creating Your First Store

Now, let’s create a store, which represents a state of your application:

import { createStore } from "effector";

const $counter = createStore(0);

Adding events

Next, let’s create some events, that will update our store when triggered:

import { createEvent } from "effector";

const incremented = createEvent();
const decremented = createEvent();

Connecting Events to Store

And link the events to the store:

// counter.js
import { createEvent, createStore } from "effector";

const $counter = createStore(0);

const incremented = createEvent();
const decremented = createEvent();

$counter.on(incremented, (counter) => counter + 1);
$counter.on(decremented, (counter) => counter - 1);

// and call it somewhere in your app
incremented();
// counter will increase by 1
decremented();
// counter will decrease by -1
decremented();
// counter will decrease by -1

Framework Integration

Installation

If you want to use Effector with a specific framework, you’ll need to install an additional package:

npm install effector effector-react

npm install effector effector-vue

npm install effector effector-solid

Usage examples

And use it like this:

import { useUnit } from "effector-react";
import { createEvent, createStore } from "effector";
import { $counter, incremented, decremented } from "./counter.js";

export const Counter = () => {
  const [counter, onIncremented, onDecremented] = useUnit([$counter, incremented, decremented]);
  // or
  const { counter, onIncremented, onDecremented } = useUnit({ $counter, incremented, decremented });
  // or
  const counter = useUnit($counter);
  const onIncremented = useUnit(incremented);
  const onDecremented = useUnit(decremented);

  return (
    <div>
      <h1>Count: {counter}</h1>
      <button onClick={onIncremented}>Increment</button>
      <button onClick={onDecremented}>Decrement</button>
    </div>
  );
};

<script setup>
  import { useUnit } from "@effector-vue/composition";
  import { $counter, incremented, decremented } from "./counter.js";
  const [counter, onIncremented, onDecremented] = useUnit([$counter, incremented, decremented]);
  // or
  const { counter, onIncremented, onDecremented } = useUnit({ $counter, incremented, decremented });
  // or
  const counter = useUnit($counter);
  const onIncremented = useUnit(incremented);
  const onDecremented = useUnit(decremented);
</script>

<template>
  <div>
    <h1>Count: {{ counter }}</h1>
    <button @click="onIncremented">Increment</button>
    <button @click="onDecremented">Decrement</button>
  </div>
</template>

import { createEvent, createStore } from "effector";
import { useUnit } from "effector-solid";
import { $counter, incremented, decremented } from "./counter.js";

const Counter = () => {
  const [counter, onIncremented, onDecremented] = useUnit([$counter, incremented, decremented]);
  // or
  const { counter, onIncremented, onDecremented } = useUnit({ $counter, incremented, decremented });
  // or
  const counter = useUnit($counter);
  const onIncremented = useUnit(incremented);
  const onDecremented = useUnit(decremented);

  return (
    <div>
      <h1>Count: {counter()}</h1>
      <button onClick={onIncremented}>Increment</button>
      <button onClick={onDecremented}>Decrement</button>
    </div>
  );
};

export default Counter;

What about Svelte ?

No additional packages are required to use Effector with Svelte. It works seamlessly with the base Effector package.