since

effector 20.0.0

merge(unitsArray)

Merges array of units (Store/Event/Effect), returns a new Event, which fires upon trigger of any of merged units.

Arguments

1. unitsArray (Array<Store/Event/Effect>): Array of units to be merged.

Returns

Event, which fires upon any of merged units was triggered

Example 1

import {createEvent, merge} from 'effector'

const foo = createEvent()

const bar = createEvent()

const baz = merge([foo, bar])

baz.watch(v => console.log('merged event triggered: ', v))

foo(1)

// => merged event triggered: 1

bar(2)

// => merged event triggered: 2

Try it

tip

Array can contain both events and stores. In this case, resulting event will fire, upon trigger of merged events, or upon store updates.

Example 2

import {createEvent, createStore, merge} from 'effector'

const setFoo = createEvent()

const setBar = createEvent()

const $foo = createStore(0).on(setFoo, (_, v) => v)

const $bar = createStore(100).on(setBar, (_, v) => v)

const anyUpdated = merge([$foo, $bar])

anyUpdated.watch(v => console.log(`state changed to: ${v}`))

setFoo(1) // => state changed to: 1

setBar(123) // => state changed to: 123

Try it

Example 3

import {createEvent, createStore, merge} from 'effector'

const setFoo = createEvent()

const otherEvent = createEvent()

const $foo = createStore(0).on(setFoo, (_, v) => v)

const merged = merge([$foo, otherEvent])

merged.watch(v => console.log(`merged event payload: ${v}`))

setFoo(999)

// => merged event payload: 999

otherEvent('bar')

// => merged event payload: bar

Try it