forward

Method to create connection between units in a declarative way. Sends updates from one set of units to another

Formulae

forward({

from: Unit | Unit[],

to: Unit | Unit[]

}): Subscription

Arguments

1. from (Unit | Unit[]): Source of updates. Forward will listen for changes of these units

   • if an Event is passed, to will be triggered on each event trigger and receives event argument
   • if a Store is passed, to will be triggered on each store change and receives new value of the store
   • if an Effect is passed, to will be triggered on each effect call and receives effect parameter
   • if an array of units is passed, to will be triggered when any unit in from array is triggered

2. to (Unit | Unit[]): Target for updates. forward will trigger these units with data from from

   • if passed an Event, it will be triggered with data from from unit
   • if passed a Store, data from from unit will be written to store and trigger its update
   • if passed an Effect, it will be called with data from from unit as parameter
   • if to is an array of units, each unit in that array will be triggered

Returns

Subscription: Unsubscribe function. It breaks connection between from and to. After call, to will not be triggered anymore.

since

Arrays of units are supported since effector 20.6.0

Recommendation

• Arrays can contain different type of units, but their data types should match
• Use subscription with caution, because it breaks static connections and makes debug harder

Examples

Send store updates to another store

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

const $store = createStore(1)

const event = createEvent()

forward({

from: event,

to: $store,

})

$store.watch(state => console.log('store changed: ', state))

// => store changed: 1

event(200)

// => store changed: 200

Try it

Forward between arrays of units

import {createEvent, forward} from 'effector'

const firstSource = createEvent()

const secondSource = createEvent()

const firstTarget = createEvent()

const secondTarget = createEvent()

forward({

from: [firstSource, secondSource],

to: [firstTarget, secondTarget],

})

firstTarget.watch(e => console.log('first target', e))

secondTarget.watch(e => console.log('second target', e))

firstSource('A')

// => first target A

// => second target A

secondSource('B')

// => first target B

// => second target B

Try it