რა არის middleware Redux-ში და როგორ მუშაობენ thunks?

Question

Accepted Answer

**Middleware** მდებარეობს action-ის dispatch-ს და action-ის reducer-ზე ჩამოსვლას შორის, რაც საშუალებას გაძლევთ წაკითხოთ action-ები **side effect**-ების (ასინქრონული API გამოძახებები, logging) დასამუშავებლად — რომელიც reducer-ებმა ვერ დაამუშავებენ, რადგან ისინი სუფთა უნდა იყვნენ. **Thunk**-ები ყველაზე გავრცელებული middleware არის, რომელიც ასინქრონული ლოგიკის საშუალებას აძლევს.

## სად ჯდება middleware

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

Middleware-ი გარს იხვევს `dispatch`-ს, ამიტომ ყოველი action გადის მის მეშვეობით reducer-ზე ჩამოსვლამდე. ეს არის განსაზღვრული ადგილი იმ side effect-ებისთვის, რომელიც reducer-ებმა აკრძალეს.

## პრობლემა, რომელსაც 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
}
```

თქვენ გჭირდებათ ადგილი, სადაც გააკეთოთ ასინქრონული სამუშაო (fetch) და შემდეგ dispatch გააკეთოთ შედეგი. Thunk middleware-ი საშუალებას აძლევთ dispatch-ის **ფუნქცია** ჩვეულებრივი object-ის ნაცვლად.

## 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-ი აკეთებს ასინქრონულ სამუშაოს და dispatch აკეთებს সাধারণ action-ებს (`loading`/`loaded`/`error`) ყოველი ეტაპზე — reducer-ების სუფთა შენახვისას, მედელ side effect ცხოვრობს 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-ი მოვლენებს მოწყობით, რომელიც reducer-ებმა ვერ შეძლეს — განსაკუთრებით **ასინქრონული side effect**-ები — სუფთაების შენახვის დროს, რაც reducer-ებს წინასწარმეტყველებადი და ტესტირებადი ხდის.

Thunk-ები სტანდარტული, მიმართვადი მეთოდია ასინქრონული რამის გასაკეთებლად (მონაცემების ჩამოტვირთვა, loading/success/error action-ების dispatch).

Middleware pipeline-ისა და thunk pattern-ის გაგება სავალდებულოა რეალური Redux აპლიკაციებისთვის, რადგან თითქმის ყველა მათ სჭირდება მონაცემების ჩამოტვირთვა; RTK-ის `createAsyncThunk` ზუსტად ამაზეა აგებული.