Kas yra middleware Redux sistemoje ir kaip veikia thunks?

Question

Accepted Answer

**Middleware** yra tarp action dispatch ir action pasiekimo į reducer, leidžiant jums perimti veiksmų žiūrėjimui, kad būtų galima valdyti **šalinius efektus** (asinchronius API skambučius, žurnalizavimą) — ko negali daryti reduktoriai, nes jie turi likti gryni. **Thunk** yra dažniausias middleware, leidžiantis asinchroninę logiką.

## Kur sėdima middleware

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

Middleware apvija `dispatch`, todėl kiekvienas veiksmas praeina pro jį prieš pasiekiant redukcininkus. Tai yra nurodyta vieta šaliems efektams, kuriuos draudžia reduktoriai.

## Problema, kurią sprendžia thunk

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

Jums reikalinga vieta, kur atlikti asinchroninį darbą (fetch) ir tada iš naujo skleisti rezultatą. Thunk middleware leidžia skleisti **funkciją** vietoj paprasto objekto.

## Thunk — funkcija, kuri gauna 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 atlieka asinchroninį darbą ir iš naujo skleidžia paprastus veiksmų (`loading`/`loaded`/`error`) kiekviename etape — leisdama redukcininkams likti gryniem, o šaluinis efektas gyvena thunk.

## Kiti middleware naudojimo atvejai ir alternatyvos

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

## Kodėl tai svarbu

Middleware yra tai, kaip Redux tvarko viską, ko reduktoriai negali — ypač **asinchronius šalinius efektus** — išsaugant grynumą, kuris redukcininkus daro nuspėjamais ir testuojamais.

Thunk yra standartinis, lengvai pasiekiamas būdas atlikti asinchroninį darbą (duomenų atsisiuntimą, loading/success/error veiksmų sklaidą).

Suprasti middleware dujotę ir thunk šabloną būtina tikroms Redux programoms, nes beveik visos turi įkelti duomenis; RTK `createAsyncThunk` yra pastatyta būtent ant to pagrindo.