Apa iku middleware ing Redux lan kepiye thunk bisa gumana?

Question

Accepted Answer

**Middleware** dumunung ing tengahe dispatch tindakan lan tindakan nyapu reducer, ngawehake sampeyan kemampuan kanggo intercept tindakan menawi kanggo garap **side effect** (async API calls, logging) — kang ora bisa gawakake reducer amarga kudu tetep pure. **Thunk** minangka middleware paling umum, ngawehake posibilitas async logic.

## Endi middleware ana

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

Middleware mbungkus `dispatch`, mula saben tindakan mili liwati iku sak durunge nyapu reducer. Iki minangka panggenan khusus kanggo side effect kang dilarang reducer.

## Masalah kang digatekake 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
}
```

Sampeyan kudu entuk panggenan kanggo gawakake asynchronous work (fetch) banjur dispatch hasilipun. Middleware thunk ngawehake kemampuan kanggo dispatch **function** kadonya wae objek biasane.

## Thunk — fungsi kang nampa 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 gawakake asynchronous work lan dispatch tindakan biasane (`loading`/`loaded`/`error`) ing saben tahap — njaga reducer tetep pure nalika side effect ana ing thunk.

## Panggunaan middleware liyane & alternatif

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

## Mangapa iku penting

Middleware minangka cara Redux garap kabeh kang ora bisa gawakake reducer — utamane **async side effect** — nalika njaga kesucian kang gawe reducer bisa diprediksi lan mudah diuji.

Thunk minangka cara standar lan gampang kanggo gawakake asynchronous (ambil data, dispatch loading/success/error actions).

Mahami pipeline middleware lan pola thunk penting kanggo aplikasi Redux nyata, amarga meh kabeh butuh muat data; `createAsyncThunk` RTK dibangun persis iki.