Suggest an edit

Improve this article

Refine the answer for “How does Effector differ from Redux?”. 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)

Effector and Redux are **both state managers**, but they are **built on completely different philosophies**.
In short:

> Effector is a **reactive, declarative system**;
> Redux is an **imperative, reducer-based architecture**.

Let's break it down **point by point, with examples**.

---

## 1. Approach to state management

|  | **Effector** | **Redux / RTK** |
|---|---|---|
| **Paradigm** | Reactive | Imperative |
| **How the logic is described** | "What depends on what" (dataflow) | "What to do when an event happens" (reducers) |
| **Updates** | Automatic, based on dependencies | Manual, through `dispatch()` |
| **Philosophy** | Describe the data flow | Describe how the reducer changes the store |

Effector:

```javascript
const increment = createEvent()
const $count = createStore(0).on(increment, c => c + 1)
```

Redux:

```javascript
const increment = () => ({ type: 'increment' })
const reducer = (state = 0, action) =>
  action.type === 'increment' ? state + 1 : state
```

---

## 2. Architecture and principles

|  | **Effector** | **Redux** |
|---|---|---|
| **State** | Several independent `store`s | One large `store` (or slices) |
| **Side effects** | Through `createEffect()` (built in) | Through `thunk`, `saga`, `observable`, etc. |
| **Subscriptions** | Reactive (`.watch`, `.map`, `sample`) | Through `useSelector()` / middleware |
| **Typing** | Excellent TypeScript integration | Better with Redux Toolkit, but still bulky |
| **Performance** | Minimal re-renders, fine-grained reactivity | Can trigger unnecessary re-renders |
| **SSR** | Out of the box | Requires manual state management |

---

## 3. Working with asynchrony

Effector manages asynchronous effects built in:

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

fetchUserFx.done.watch(({ result }) => console.log('User', result))
```

In Redux you need to write middleware by hand:

```javascript
const fetchUser = id => async dispatch => {
  dispatch({ type: 'pending' })
  const res = await fetch(`/api/users/${id}`)
  dispatch({ type: 'success', payload: await res.json() })
}
```

Effector does this declaratively, without middleware.

---

## 4. Flexibility and scaling

Effector lets you describe dependencies explicitly:

```javascript
sample({
  source: $user,
  clock: updateClicked,
  fn: (user) => ({ ...user, updated: true }),
  target: $user,
})
```

In Redux, such a reactive link is not possible - you need to manually dispatch a chain of actions.

Effector does not require a global store:
you can create a local `store` for any component or module.
Redux, on the other hand, assumes **a single centralized structure** (store -> reducer tree).

---

## 5. Performance and subscriptions

Effector subscribes a component **only to the data it needs**.
When other `store`s change, the component does not re-render.

Redux, even with `useSelector`, often triggers **unnecessary re-renders** unless you use memoization (`shallowEqual`, `reselect`, etc.).

---

## 6. Code and DX (Developer Experience)

Effector:

```javascript
const addTodo = createEvent<string>()
const $todos = createStore<string[]>([]).on(addTodo, (list, todo) => [...list, todo])
```

Redux Toolkit:

```javascript
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => { state.push(action.payload) }
  }
})
```

Effector means **less boilerplate**, more declarativeness and reactive links.
Redux Toolkit is **more imperative**, but familiar to developers from older ecosystems.

---

## 7. When to choose which

| Scenario | What to choose |
|---|---|
| Small app | Zustand, Jotai, Effector |
| Large SPA with business logic | **Effector** |
| Enterprise / legacy / a team already familiar with it | **Redux Toolkit** |
| Strict dataflow and reactivity needed | **Effector** |
| A clear "step by step" flow needed | **Redux Toolkit** |

---

## 8. In one sentence

> **Effector** is a reactive dataflow manager: you describe the links, and everything updates itself.
> **Redux** is an imperative action-reducer manager: you dispatch actions, and everything updates manually.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.