import { createEvent } from "effector";
Methods
createEvent(name?)
Method for creating an event.
Formulae
createEvent<T>(name?): Event<T>
createEvent(name?): Event<void>
Arguments
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
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