import { createEvent } from "effector";

Methods

createEvent(name?)

Method for creating an event.

Formulae

createEvent<T>(name?): Event<T>
createEvent(name?): Event<void>

Arguments

1. name? (string): Event name

Returns

EventCallable: New event

Notes

Event – it is a function which allows to change state when called (see simple example) also it can be a good way to extract data (see map and watch example). Also, it allows us to send data to another event or effect via effector operators.

Examples

Simple

import { createStore, createEvent } from "effector";

const incrementBy = createEvent();
const resetCounter = createEvent();
const $counter = createStore(0);

$counter.on(incrementBy, (counter, number) => counter + number).reset(resetCounter);

$counter.watch((counter) => {
  console.log("counter is now", counter);
});
// => counter is now 0

incrementBy(10);
// => counter is now 10

incrementBy(10);
// => counter is now 20

incrementBy(10);
// => counter is now 30

resetCounter();
// => counter is now 0

Try it

We created a store $counter and an event incrementBy, and started watching the store.
Notice the function call incrementBy(10). Whenever you will call incrementBy(10), you can look at the console and see how state of $counter changes.

Using .map and .watch

import { createEvent } from "effector";

const fullNameReceived = createEvent();

const firstNameReceived = fullNameReceived.map((fullName) => fullName.split(" ")[0]);
const lastNameReceived = fullNameReceived.map((fullName) => fullName.split(" ")[1]);
const firstNameUppercaseReceived = firstNameReceived.map((firstName) => firstName.toUpperCase());

firstNameReceived.watch((firstName) => console.log("First name", firstName));
lastNameReceived.watch((lastName) => console.log("Last name", lastName));
firstNameUppercaseReceived.watch((firstName) => console.log("Upper case", firstName));

fullNameReceived("John Doe");
// => First name John
// => Last name Doe
// => Upper case JOHN

Try it