Kaj je middleware v Redux-u in kako delujejo thunks?

Question

Accepted Answer

**Middleware** se nahaja med dispečanjem akcije in dosegom akcije do reducerja, kar vam omogoča, da prestrezate akcije za obravnavo **stranskih učinkov** (asinkroni API klici, beleženje) — kar reducerji ne morejo narediti, ker morajo ostati čisti. **Thunks** so najpogostejši middleware, ki omogočajo asinkrono logiko.

## Kje se middleware ujame

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

Middleware obda `dispatch`, zato vsaka akcija poteka skoznje, preden doseže reducerje. To je označeno mesto za stranske učinke, ki jih reducerji prepovedujejo.

## Problem, ki ga rešujejo 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
}
```

Potrebujete mesto za asinkrono delo (fetch) in nato dispečanje rezultata. Thunk middleware omogoča dispečanje **funkcije** namesto navadnega objekta.

## Thunk — funkcija, ki dobi 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 izvede asinkrono delo in dispečira navadne akcije (`loading`/`loaded`/`error`) na vsakem koraku — ohrani reducerje čiste, medtem ko stranski učinek živi v thunku.

## Druge uporabe middleware-ja in alternative

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

## Zakaj je to pomembno

Middleware je način, kako Redux obravnava vse, česar reducerji ne morejo — zlasti **asinkroni stranski učinki** — hkrati pa ohranja čistost, ki naredi reducerje napovedljive in testljive.

Thunks so standarden, dostopen način za asinkrono (pridobivanje podatkov, dispečanje akcij nalaganja/uspeha/napake).

Razumevanje pipeline-a middleware-ja in vzorca thunk je bistveno za prave Redux aplikacije, ker jih skoraj vse potrebujejo za nalaganje podatkov; RTK-jev `createAsyncThunk` temelji na točno tem.