What is "event" in Effector?

ReactJunior~2 min read

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.