Mikä on middleware Reduxissa ja miten thunkit toimivat?

Question

Accepted Answer

**Middleware** sijaitsee action-lähettämisen ja action-päättymisen reduseriin välillä, jolloin voit siepata actioneja **sivuvaikutusten** käsittelemiseksi (asynkronisia API-kutsuja, lokitusta) — mitä reduserit eivät voi tehdä, koska niiden tulee pysyä puhtaina. **Thunkit** ovat yleisin middleware, joka mahdollistaa asynkronisen logiikan.

## Missä middleware sopii

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

Middleware käärii `dispatch`:in, joten jokainen action kulkee sen läpi ennen kuin saapuu redusereihin. Tämä on määritetty paikka sivuvaikutuksille, jotka reduserit kieltävät.

## Ongelma, jonka thunkit ratkaisevat

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

Tarvitset paikan asynkronisen työn tekemiselle (fetch) ja sitten tuloksen lähettämiselle. Thunk middleware mahdollistaa **funktion** lähettämisen pelkkää objektia sijaan.

## Thunk — funktio, joka saa dispatch-operaation

```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 suorittaa asynkronisen työn ja lähettää yksinkertaisia actioneja (`loading`/`loaded`/`error`) jokaisessa vaiheessa — pitäen reduserit puhtaina kun sivuvaikutus elää thunkissa.

## Muut middleware-käytöt ja vaihtoehdot

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

## Miksi sillä on merkitystä

Middleware on kuinka Redux käsittelee kaiken, mitä reduserit eivät voi — erityisesti **asynkronisia sivuvaikutuksia** — samalla säilyttäen puhtauden, joka tekee reduserista ennustettavia ja testattavia.

Thunkit ovat vakiomuotoinen, ymmärrettävä tapa tehdä asynkronisia operaatioita (tietojen haku, loading/success/error-actionien lähettäminen).

Middleware-putken ja thunk-mallin ymmärtäminen on olennaista todellisille Redux-sovelluksille, koska lähes kaikki niistä tarvitsevat tietojen lataamista; RTK:n `createAsyncThunk` rakennetaan juuri tälle perustalle.