ਐਕਸ਼ਨ ਅਤੇ ਰੀਡਿਊਸਰ ਕੀ ਹਨ, ਅਤੇ ਰੀਡਿਊਸਰ ਸ਼ੁੱਧ ਕਿਉਂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ?

Question

Accepted Answer

ਇੱਕ **ਐਕਸ਼ਨ** ਇੱਕ ਸਾਧਾਰਨ ਆਬਜੈਕਟ ਹੈ ਜੋ *ਕੀ ਹੋਇਆ* ਦੀ ਵਰਣਨਾ ਕਰਦਾ ਹੈ; ਇੱਕ **ਰੀਡਿਊਸਰ** ਇੱਕ ਸ਼ੁੱਧ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਮੌਜੂਦਾ ਸਟੇਟ ਅਤੇ ਇੱਕ ਐਕਸ਼ਨ ਲੈਂਦਾ ਹੈ ਅਤੇ *ਅਗਲਾ* ਸਟੇਟ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਇਕੱਠੇ ਉਹ ਪੂਰਵ-ਨਿਰਧਾਰਿਤ ਸਟੇਟ ਟ੍ਰਾਂਜਿਸ਼ਨ ਲਾਗੂ ਕਰਦੇ ਹਨ।

## ਐਕਸ਼ਨ — ਇਵੈਂਟ ਦੀ ਵਰਣਨਾ ਕਰੋ

```js
// just data: a `type` (required) + any payload
{ type: "todos/added", payload: { id: 1, text: "Learn Redux" } }
{ type: "todos/toggled", payload: 1 }
```

ਐਕਸ਼ਨ *ਕੁਝ ਨਹੀਂ ਕਰਦੇ* — ਉਹ ਇਵੈਂਟ ਦੀ ਘੋਸ਼ਣਾਤਮਕ ਵਰਣਨਾ ਹਨ। ਉਹਨਾਂ ਨੂੰ ਭੂਤਕਾਲ ਮਾਈਨੇ ਤੱਥਾਂ ਵਜੋਂ ਨਾਮ ਦੇਣਾ ("ਸ਼ਾਮਲ", "ਟੌਗਲ") ਇਸ ਗੱਲ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਿਤ ਕਰਦਾ ਹੈ ਕਿ ਉਹ ਕੀ ਹੋਇਆ ਇਸ ਦਾ ਰਿਕਾਰਡ ਰੱਖਦੇ ਹਨ।

## ਰੀਡਿਊਸਰ — ਅਗਲਾ ਸਟੇਟ ਕੰਪਿਊਟ ਕਰੋ

```js
function todosReducer(state = [], action) {
  switch (action.type) {
    case "todos/added":
      return [...state, action.payload];              // new array
    case "todos/toggled":
      return state.map(t =>                             // new array, new object for the changed one
        t.id === action.payload ? { ...t, done: !t.done } : t
      );
    default:
      return state;                                     // unknown action → unchanged
  }
}
```

ਇੱਕ ਰੀਡਿਊਸਰ ਦੀ ਸਿਗਨੇਚਰ `(state, action) => newState` ਹੈ। ਇਹ ਇੱਕ **ਨਵੀਂ** ਸਟੇਟ ਆਬਜੈਕਟ/ਐਰੇ ਵਾਪਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ (ਅਪਰਿਵਰਤਨਸ਼ੀਲ ਢੰਗ ਨਾਲ), ਕਦੀ ਇਨਪੁਟ ਨੂੰ ਮਿਊਟੇਟ ਨਹੀਂ ਕਰੋ।

## ਰੀਡਿਊਸਰ ਸ਼ੁੱਧ ਕਿਉਂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ

ਇੱਕ ਸ਼ੁੱਧ ਫੰਕਸ਼ਨ: (1) ਉਹੀ ਇਨਪੁਟ ਲਈ ਉਹੀ ਆਉਟਪੁਟ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਅਤੇ (2) ਕੋਈ **ਸਾਈਡ ਇਫੈਕਟ ਨਹੀਂ** ਹਨ। ਰੀਡਿਊਸਰ ਦੋਵਾਂ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ:

```js
// ❌ NOT pure — breaks everything
function badReducer(state, action) {
  state.value++;              // ❌ mutates input (breaks change detection, time-travel)
  fetch("/api/log");          // ❌ side effect (non-deterministic, untestable)
  return { value: Math.random() }; // ❌ non-deterministic output
}
```

ਸ਼ੁੱਧਤਾ Redux ਦੀਆਂ ਦਸਖਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਯਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ:

```text
✓ Predictability   — same state + action ALWAYS gives the same result
✓ Time-travel / replay — you can re-run actions to reproduce any state
✓ Testability      — just call reducer(state, action) and assert; no mocks needed
✓ Change detection — returning new references lets the UI detect changes
```

ਸਾਈਡ ਇਫੈਕਟ (API ਕਾਲ, ਲੌਗਿੰਗ, ਰੈਂਡਮਨੈਸ) **ਮਿਡਲਵੇਅਰ** (thunks/sagas) ਜਾਂ ਇਫੈਕਟ ਵਿਚ ਰਹਿੰਦੇ ਹਨ — ਕਦੀ ਰੀਡਿਊਸਰ ਵਿਚ ਨਹੀਂ।

## ਇਸ ਦਾ ਮਹੱਤਵ

ਐਕਸ਼ਨ/ਰੀਡਿਊਸਰ ਮਾਡਲ Redux-ਸਟਾਈਲ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦਾ ਦਿਲ ਹੈ ਅਤੇ ਇਸ ਕਾਰਣ ਹੈ ਕਿ ਇਹ ਇੰਨਾ ਡਿਬੱਗਯੋਗ ਅਤੇ ਪਰੀਖਣਯੋਗ ਹੈ।

ਸ਼ੁੱਧਤਾ ਦੀ ਲੋੜ ਆਰਬਿਟਰਰੀ ਨਹੀਂ ਹੈ: ਇਹ *ਜੋ ਬਣਾਉਂਦਾ ਹੈ* ਕਿ ਸਮਾਂ-ਯਾਤਰਾ ਡਿਬੱਗਿੰਗ, ਐਕਸ਼ਨ ਰੀਪਲੇ, ਅਤੇ ਤੁੱਛ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਸੰਭਵ ਹੈ, ਅਤੇ ਇਸ ਤੋਂ ਬਿਨਾਂ ਸਾਈਡ ਇਫੈਕਟ ਕਿਸੇ ਹੋਰ ਥਾਂ 'ਤੇ ਜਾਣੇ ਜ਼ਰੂਰੀ ਹੈ।

ਇਹ ਸ਼ੁੱਧ-ਫੰਕਸ਼ਨ-ਚਾਲਿਤ, ਅਪਰਿਵਰਤਨਸ਼ੀਲ ਅਪਡੇਟ ਪੈਟਰਨ Redux, NgRx, useReducer, ਅਤੇ ਬਿਖ਼ਾਰ ਬਿਲਕੁਲ ਤਾਵਾਂ ਵਿਚ ਆਉਂਦਾ ਹੈ — ਇਸ ਨੂੰ ਸਮਝਣਾ (ਅਤੇ ਰੀਡਿਊਸਰ ਨੂੰ ਸ਼ੁੱਧ ਰੱਖਣ ਦਾ ਅਨੁਸ਼ਾਸਨ) ਪੂਰਵ-ਨਿਰਧਾਰਿਤ ਸਟੇਟ ਦੇ ਲਈ ਬੁਨਿਆਦੀ ਹੈ।