Что такое middleware в Redux и как работают thunks?

Question

Accepted Answer

**Middleware** находится между отправкой действия и достижением действия редьюсером, позволяя вам перехватывать действия для обработки **побочных эффектов** (асинхронные вызовы API, логирование) — чего редьюсеры не могут делать, потому что они должны оставаться чистыми. **Thunks** — самое распространённое middleware, позволяющее использовать асинхронную логику.

## Где находится middleware

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

Middleware оборачивает `dispatch`, поэтому каждое действие проходит через него перед тем, как достичь редьюсеров. Это определённое место для побочных эффектов, которые запрещают редьюсеры.

## Проблема, которую решают thunks

```js
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
  // ...need to dispatch the result into the store
}
```

Вам нужно место для асинхронной работы (fetch) и последующей отправки результата. Middleware thunk позволяет отправлять **функцию** вместо простого объекта.

## Thunk — функция, которая получает dispatch

```js
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. signal loading
    try {
      const users = await api.getUsers();           // 2. async side effect
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
    }
  };
}

// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
```

Thunk выполняет асинхронную работу и отправляет простые действия (`loading`/`loaded`/`error`) на каждом этапе — сохраняя чистоту редьюсеров, пока побочный эффект живёт в thunk.

## Другие применения middleware и альтернативы

```text
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
```

## Почему это важно

Middleware — это то, как Redux обрабатывает всё, что не могут делать редьюсеры — в особенности **асинхронные побочные эффекты** — сохраняя при этом чистоту, которая делает редьюсеры предсказуемыми и тестируемыми.

Thunks — стандартный, доступный способ работать с асинхронностью (загрузка данных, отправка действий loading/success/error).

Понимание pipeline middleware и паттерна thunk важно для реальных приложений Redux, так как почти всем из них нужно загружать данные; `createAsyncThunk` из RTK строится именно на этом.