Co to jest middleware w Reduxie i jak działają thunki?

Question

Accepted Answer

**Middleware** znajduje się między dispatchowaniem akcji a jej dotarciem do reducera, umożliwiając przechwycenie akcji w celu obsługi **efektów ubocznych** (asynchroniczne wywołania API, logowanie) — czego reducery nie mogą zrobić, ponieważ muszą pozostać czyste. **Thunki** są najpopularniejszym middleware, umożliwiającym logikę asynchroniczną.

## Gdzie middleware się znajduje

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

Middleware opakowuje `dispatch`, więc każda akcja przechodzi przez niego przed dotarciem do reducerów. To jest wyznaczone miejsce dla efektów ubocznych, które reducery zabraniają.

## Problem, który rozwiązują thunki

```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
}
```

Potrzebujesz miejsca do wykonania pracy asynchronicznej (fetch) i następnie dispatchowania wyniku. Middleware thunk umożliwia dispatchowanie **funkcji** zamiast zwykłego obiektu.

## Thunk — funkcja, która otrzymuje 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 wykonuje pracę asynchroniczną i dispatchuje zwykłe akcje (`loading`/`loaded`/`error`) na każdym etapie — utrzymując reducery czystymi, podczas gdy efekt uboczny znajduje się w thunku.

## Inne zastosowania middleware i alternatywy

```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)
```

## Dlaczego to ważne

Middleware to sposób, w jaki Redux obsługuje wszystko, czego reducery nie mogą — szczególnie **asynchroniczne efekty uboczne** — zachowując czystość, która sprawia, że reducery są przewidywalne i testowalne.

Thunki są standardowym, przystępnym sposobem na pracę asynchroniczną (pobieranie danych, dispatchowanie akcji załadowania/sukcesu/błędu).

Zrozumienie potoku middleware i wzorca thunka jest niezbędne dla rzeczywistych aplikacji Redux, ponieważ prawie wszystkie z nich muszą ładować dane; `createAsyncThunk` w RTK opiera się dokładnie na tym.