Çfarë është middleware në Redux dhe si funksionojnë thunks?

Question

Accepted Answer

**Middleware** ndodhet midis dispatchimit të një aksioni dhe arritjes së aksionit në reducer, duke ju lejuar të ndërprerë aksionet për të trajtuar **efekte anësor** (thirrje async API, regjistrim) — gjëra që reducers nuk mund të bëjnë sepse duhet të mbeten të pastra. **Thunks** janë middleware më e zakonshme, duke mundësuar logjikën async.

## Ku përshtatet middleware

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

Middleware mbyll `dispatch`, kështu që çdo aksion kalon përmes saj para se të arrijë në reducers. Ky është vendi i caktuar për efektet anësor që reducers ndalojnë.

## Problemi që zgjidhin 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
}
```

Keni nevojë për një vend për të bërë punë async (fetch) dhe pastaj për të dispatchuar rezultatin. Thunk middleware lejon dispatchimin e një **funksioni** në vend të një objekti të thjeshtë.

## Një thunk — një funksion që merr 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 bën punën async dhe dispatchon aksione të thjeshta (`loading`/`loaded`/`error`) në secilin stadium — duke mbajtur reducers të pastra ndërsa efekti anësor jeton në thunk.

## Përdorime të tjera të middleware-it dhe 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)
```

## Pse është i rëndësishëm

Middleware është se si Redux trajtoi gjithçka që reducers nuk mund — veçanërisht **efektet anësor async** — ndërsa ruan pastrësinë që e bën reducers të parashikueshme dhe të testushme.

Thunks janë mënyra standarde, e arritshme për të bërë async (marrja e të dhënave, dispatchimi i aksioneve të ngarkimit/suksesit/gabimit).

Kuptimi i pipeline-it të middleware-it dhe modelit thunk është thelbësor për aplikacionet e vërteta Redux, pasi pothuajse të gjitha kanë nevojë për të ngarkuar të dhëna; `createAsyncThunk` i RTK-it ndërtohet pikërisht mbi këtë.