Redux-இல் middleware என்றால் என்ன மற்றும் thunks எவ்வாறு பணிபுரிகிறது?

Question

Accepted Answer

**Middleware** ஒரு action ஐ dispatch செய்வதற்கும் அந்த action ஆனது reducer இல் அடைவதற்கும் இடையே அமர்ந்து, நீங்கள் actions ஐ intercept செய்து **side effects** ஐ (async API calls, logging) கையாள அனுமதிக்கிறது — இது reducers செய்ய முடியாது ஏனெனில் அவை pure ஆக இருக்க வேண்டும். **Thunks** என்பது மிகவும் பொதுவான middleware ஆகும், இது async logic ஐ செயல்படுத்த அனுமதிக்கிறது.

## Middleware எங்கே பொருந்துகிறது

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

Middleware `dispatch` ஐ மூடி சுற்றுவது, அதனால் ஒவ்வொரு action வும் reducers ஐ அடைவதற்கு முன்பு அதன் மூலம் செல்கிறது. இது reducers தடை செய்யும் side effects க்கான குறிப்பிடப்பட்ட இடமாகும்.

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

நீங்கள் async work செய்ய (fetch) மற்றும் பின்னர் முடிவை dispatch செய்ய ஒரு இடம் தேவை. Thunk middleware நீங்கள் plain object க்கு பதிலாக ஒரு **function** ஐ dispatch செய்ய அனுமதிக்கிறது.

## Thunk — dispatch ஐ பெறும் function

```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 async work ஐ செய்து ஒவ்வொரு stage இலும் plain actions (`loading`/`loaded`/`error`) ஐ dispatch செய்கிறது — reducers ஐ pure ஆக வைத்திருக்க ஒரு புறம் 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 செய்ய வேண்டிய அனைத்தையும் கையாளும் வழிமுறையாகும் — குறிப்பாக **async side effects** — reducers ஐ predictable மற்றும் testable ஆக வைத்திருக்கும் purity ஐ பாதுகாக்கும் போது.

Thunks என்பது async செய்ய (data fetch, loading/success/error actions dispatch) ஒரு standard, approachable வழிமுறையாகும்.

Middleware pipeline மற்றும் thunk pattern ஐ புரிந்துகொள்ளுவது உண்மையான Redux apps க்கு அத்தியாவசியமாகும், ஏனெனில் ஒரே பெரும்பாலான data load செய்ய வேண்டும்; RTK ஐன் `createAsyncThunk` இதில் கட்டப்பட்டுள்ளது.