Pay attention
This documentation is for the as yet unreleased version of effector Spacewatch 23.0.


[ ru ]

The core team recommends using sample instead of forward since effector 22.0.0

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


  from: Unit | Unit[],
  to: Unit | Unit[]
}): Subscription


  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


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


Arrays of units are supported since effector 20.6.0


  • Arrays can contain different types of units, but their data types should match
  • Use subscription with caution, because it breaks static connections and makes debug harder


Send store updates to another store

import { createStore, createEvent, forward } from "effector";

const $store = createStore(1);
const event = createEvent();

  from: event,
  to: $store,

$ => console.log("store changed: ", state));
// => store changed: 1

// => 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();

  from: [firstSource, secondSource],
  to: [firstTarget, secondTarget],
}); => console.log("first target", e)); => console.log("second target", e));

// => first target A
// => second target A
// => first target B
// => second target B

Try it