import { forward, type Subscription } from "effector";

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

Methods

forward({ from, to })

Deprecated

Since effector 23.0.0.

The core team recommends using sample instead of forward.

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

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

Contributors