forward

since effector 22.0.0

core team recommends sample instead

Method to create connection between units in a declarative way. Send 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