Skip to main content

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

Last updated on