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.
Last updated on