Τι είναι middleware στο Redux και πώς λειτουργούν τα thunks;

Question

Accepted Answer

**Middleware** βρίσκεται ανάμεσα στη διαχείριση μιας action και στη δράση που φτάνει στο reducer, επιτρέποντάς σας να παρεμβάλετε actions για να χειριστείτε **παρενέργειες** (async κλήσεις API, logging) — κάτι που τα reducers δεν μπορούν να κάνουν γιατί πρέπει να παραμείνουν καθαρά. **Thunks** είναι το πιο κοινό middleware, επιτρέποντας ασύγχρονη λογική.

## Πού ταιριάζει το middleware

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

To middleware τυλίγει το `dispatch`, οπότε κάθε action περνάει μέσα από αυτό πριν φτάσει στα reducers. Αυτό είναι το προορισμένο μέρος για τις παρενέργειες που απαγορεύουν τα reducers.

## Το πρόβλημα που λύνουν τα 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) και στη συνέχεια να διαχειριστείτε το αποτέλεσμα. Το thunk middleware επιτρέπει την αποστολή μιας **συνάρτησης** αντί ενός απλού αντικειμένου.

## Ένα 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 εκτελεί την ασύγχρονη εργασία και αποστέλλει απλά actions (`loading`/`loaded`/`error`) σε κάθε στάδιο — διατηρώντας τα reducers καθαρά ενώ η παρενέργεια ζει στο 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 χειρίζεται ό,τι τα reducers δεν μπορούν — ιδιαίτερα **ασύγχρονες παρενέργειες** — διατηρώντας την καθαρότητα που κάνει τα reducers προβλέψιμα και δοκιμάσιμα.

Τα Thunks είναι ο τυπικός, κατανοητός τρόπος για να κάνετε ασύγχρονες ενέργειες (ανάκτηση δεδομένων, αποστολή loading/success/error actions).

Η κατανόηση της middleware pipeline και του thunk pattern είναι απαραίτητη για πραγματικές Redux εφαρμογές, καθώς σχεδόν όλες χρειάζονται να φορτώσουν δεδομένα· το RTK `createAsyncThunk` χτίζεται ακριβώς σε αυτό.