Suggest an edit

Improve this article

Refine the answer for “What is "event" in Effector?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In **Effector**, `event` is an **event**, that is, **a signal that something happened** in the system.
It is the basic unit that any data change starts from.

In simple terms:

> An **event** in Effector is a "trigger" (an action call) that starts a store update, an effect, or another process.

---

## 1. What an event is in the context of Effector

An `event` is a **function** that:

- accepts a **payload** (data associated with the event),
- **notifies** every subscribed `store`, `effect`, or other `event`,
- **does not change data directly**, it only reports that "something happened".

---

## 2. A simple example

```javascript
import { createEvent, createStore } from 'effector'

// create an event
const increment = createEvent()

// create a store that reacts to this event
const $count = createStore(0).on(increment, count => count + 1)

$count.watch(value => console.log('Count:', value))

increment() // Count: 1
increment() // Count: 2
```

Here `increment` is an **event** that "tells" the system
that the user wants to increase the counter.

---

## 3. Passing data (payload)

Events can carry data (like an action in Redux):

```javascript
const addTodo = createEvent<string>()
const $todos = createStore<string[]>([])
  .on(addTodo, (state, todo) => [...state, todo])

addTodo('Buy milk')
addTodo('Exercise')

// $todos = ['Buy milk', 'Exercise']
```

Every call to `addTodo()` with an argument is **a stream of data** flowing through the reactive system.

---

## 4. Subscribing to an event

An event can be "listened to" directly:

```javascript
addTodo.watch(todo => {
  console.log('Added a task:', todo)
})
```

When `addTodo('Exercise')` fires, `.watch()` runs automatically.

---

## 5. Using events to trigger effects

An event often serves as **a trigger for an effect**:

```javascript
import { createEvent, createEffect, sample } from 'effector'

const fetchUserClicked = createEvent<number>()
const fetchUserFx = createEffect(async (id: number) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
})

// link the event to the effect
sample({
  clock: fetchUserClicked,
  target: fetchUserFx,
})
```

Now calling `fetchUserClicked(5)` will trigger the `fetchUserFx` effect.

---

## 6. Event as a reactive stream

`event` is not just "a function call",
it is **a reactive data source** that can have:

- subscribers (`watch`);
- transformations (`map`);
- links (`sample`, `forward`).

Example:

```javascript
const nameChanged = createEvent<string>()
const upperNameChanged = nameChanged.map(name => name.toUpperCase())

upperNameChanged.watch(console.log)

nameChanged('alex') // logs "ALEX"
```

---

## 7. Difference from a Redux action

|  | **Effector event** | **Redux action** |
|---|---|---|
| Type | Function | Object `{ type, payload }` |
| Call | `event(payload)` | `dispatch({ type, payload })` |
| Stores state? | No | No |
| Can it be transformed | Yes (`map`, `filter`, `sample`) | No |
| Reactivity | Yes (observable) | No (imperative) |

---

## 8. Relationship with other entities

```javascript
[event] → [store]
[event] → [effect]
[event] → [another event]
```

An event can be **a data source** for any reactive element.
It is **the start of the stream** in Effector's architecture.

---

## Summary

> An **event** in Effector is a reactive signal about something that happened.
> It does not store state, it only "reports" that something happened,
> and it triggers a chain of reactions: updating a store, calling an effect, and so on.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts530 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.