Suggest an edit

Improve this article

Refine the answer for “What does forward() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What `forward` is

> `forward()` is a **mechanism for passing events or effects further along the data flow**.
> It connects a **source (**`from`**)** to a **target (**`to`**)**:
> when something happens in `from`, Effector **automatically triggers** `to` with the same payload.

You can think of it as an analogy:

> "When this event happens, trigger another one".

---

## 2. The simplest example

```javascript
import { createEvent, forward } from 'effector'

const loginClicked = createEvent()
const startAuth = createEvent()

forward({
  from: loginClicked,
  to: startAuth,
})

loginClicked()
// => automatically triggers startAuth()
```

Here `loginClicked` simply "forwards" the signal into `startAuth`.

---

## 3. Passing data (payload)

If `from` passes an argument, `to` receives it too:

```javascript
const userSelected = createEvent<{ id: number }>()
const loadUserFx = createEffect(async ({ id }) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
})

forward({
  from: userSelected,
  to: loadUserFx,
})

userSelected({ id: 42 })
// => automatically triggers loadUserFx({ id: 42 })
```

So the payload is fully preserved.

---

## 4. You can connect not only events but also effects

`from` and `to` can be:

- an `event`
- an `effect`
- a `store` (via `.updates`)
- an array of several sources

An example with several sources:

```javascript
const startLogin = createEvent()
const startRegister = createEvent()
const authFx = createEffect(async (data) => api.auth(data))

forward({
  from: [startLogin, startRegister],
  to: authFx,
})
```

Now **either event** will trigger `authFx`.

---

## 5. forward() ≠ sample()

They are sometimes confused, but they are different:

|  | **forward()** | **sample()** |
| --- | --- | --- |
| Meaning | just "redirect" | "take a snapshot from source on clock" |
| Changes data | no | can, via `fn` |
| Has a filter | no | yes, `filter` |
| Scenario | connecting events of the same kind | connecting dependencies (for example, on form submit) |

If you just need to "pass along" an event → `forward`.
If you need to "sample" data on that event → `sample`.

---

## 6. Used for routing events

An example - merging several events into one:

```javascript
const clicked = createEvent()
const pressedEnter = createEvent()
const submitForm = createEvent()

forward({
  from: [clicked, pressedEnter],
  to: submitForm,
})
```

Now both a click and pressing Enter trigger `submitForm`.

---

## 7. You can route the result of an effect

```javascript
const fetchUserFx = createEffect(async (id: number) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
})

const userLoaded = createEvent<any>()

forward({
  from: fetchUserFx.doneData,
  to: userLoaded,
})
```

Now, when `fetchUserFx` finishes successfully, `userLoaded(result)` fires.

---

## 8. Implementation details

- `forward()` **immediately creates a subscription** between the streams;
- you cannot use circular connections (Effector will catch the error);
- data does not change, it just "flies further along";
- it is convenient to use for:
  - routing signals,
  - merging events,
  - reusing business logic.

---

## 9. Visually

```javascript
[from] ---> [to]

userSelected ---> loadUserFx
```

or, if there are several:

```javascript
[clicked] ─┐
           ├──> [submitForm]
[pressedEnter] ┘
```

---

## Summary

> `forward()` is a simple way to **route events, effects, or their results** from one place to another.
> It:
>
> - does not transform data,
> - does not filter,
> - just "forwards" the call while preserving reactivity.

---

## An example to remember

```javascript
forward({
  from: logoutClicked,
  to: clearSessionFx,
})
```

> "When the user clicks Logout, run the session-clearing effect".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts574 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.