forward

Formulae

forward({ from, to }): Subscription

When fromis triggered, send data from it to to.

• forward() returns Subscription function, that can disconnect forward
• if from is an array of Units, to will be triggered if any from from is triggered
• if to is an array of Units, when to is triggered, each of to will be triggered too
• Unit is an interface, that implemented by Event, Store, Effect

forward({ from: Unit, to: Unit })

Sends data from one entity to another.

Arguments

1. from (Event | Store | Effect): Source of data. Forward will listen for changes of this unit.

   • 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.

2. to (Event | Store | Effect): Target for data. Forward will trigger this unit 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.

Data type of the from and to should be equal

Returns

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

Example

Send store data to 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

It is the not better way to update store. In most cases you need store.on

forward({ from: Array<Unit>, to: Array<Unit> })

1. from (Array<Event | Store | Effect>): List of units. When triggered one from list, to will be triggered with data from it.
   • Array can contain different type of units, but data type must fit together.
2. to (Array<Event | Store | Effect>): List of targets. When unit from from is triggered, each unit from to is called with data from unit from.

• Array can contain different type of units, but data type must fit together.

Data type of the from and to must be equal

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

Example

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

Combination

Also, you can combine array with simple unit:

forward({

from: singleSource,

to: [$store, event, effect],

})

// Another example

forward({

from: [firstSource, secondSource, $store],

to: [event, effect, anotherEffect],

})

Recommendation

• Use store.on to update store.
• Be careful when forwarding store to another store.
• Use Subscription with caution, because it breaks static connections and makes debug harder.