Mi a middleware a Reduxban és hogyan működnek a thunkok?

Question

Accepted Answer

**Middleware** az action dispatcholása és a reducer elérése között helyezkedik el, lehetővé téve, hogy interceptálj actionokat a **side effects** kezelésére (async API hívások, logging) — amit a reducerek nem tudnak, mert tisztának kell maradniuk. A **thunkok** a legelterjedtebb middleware, amely async logikát tesz lehetővé.

## Hol illeszkedik a middleware

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

A middleware becsomagolja a `dispatch`-et, ezért minden action ezen keresztül halad, mielőtt elérne a reducereket. Ez a kijelölt hely a side effects-hez, amelyeket a reducerek tiltanak.

## Az a probléma, amelyet a thunkok megoldanak

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

Szükséged van egy helyre az async munka (fetch) elvégzésére, majd az eredmény dispatcholására. A thunk middleware lehetővé teszi, hogy egy **function**-t dispatcholj egy sima objektum helyett.

## Egy thunk — egy função, amely dispatch-t kap

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

A thunk elvégzi az async munkát és sima actions-öket (`loading`/`loaded`/`error`) dispatchol minden szakaszban — a reducereket tisztán tartva, míg a side effect a thunkban él.

## Más middleware felhasználások és alternatívák

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

## Miért fontos

A middleware az a mód, ahogyan a Redux kezel mindent, amit a reducerek nem tudnak — különösen az **async side effects** — megőrizve a tisztaságot, amely a reducereket előre jelezhetetlenné és tesztelhetővé teszi.

A thunkok az async munka szabványos, hozzáférhető módja (adatok lekérése, loading/success/error actions dispatcholása).

A middleware pipeline és a thunk minta megértése elengedhetetlen a valódi Redux alkalmazások számára, mivel szinte mindegyiknek szüksége van adatok betöltésére; az RTK `createAsyncThunk` pontosan erre épül.