நிலை இயந்திரங்கள் என்ன மற்றும் எப்போது உதவுகின்றன?

Question

Accepted Answer

**நிலை இயந்திரம்** ஒரு முறைமையை முடிந்த **நிலைகளின்** தொகுப்பாக மற்றும் அவற்றுக்கு இடையிலான அனுமதிக்கப்பட்ட **மாற்றங்களாக** மாதிரியாக்குகிறது. சுயாதீன boolean கொடிகளுடன் போராடுவதற்குப் பதிலாக, எந்த நிலைகள் இருக்கின்றன மற்றும் எந்த மாற்றங்கள் சட்டப்பூர்வமானவை என்பதை நீங்கள் சரியாக வரையறுக்கிறீர்கள் — இது சாத்தியமற்ற நிலைகளை பிரতिनिधित்வ செய்ய முடியாதவை உருவாக்குகிறது.

## பிரச்சனை: boolean கலவை

```js
// ❌ multiple booleans → 2^n combinations, many of them invalid
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — nonsense, but POSSIBLE
```

சுயாதீன கொடிகளுடன், எதுவும் முரண்பாடான சேர்க்கைகளைத் தடுக்காது, மற்றும் நீங்கள் ஒவ்வொரு மாற்றத்திலும் அவற்றை கைமுறையாக சামஞ্சஸ்யமாக வைத்திருக்க வேண்டும் — பிழைக்கான ஒரு காந்தம்.

## நிலை இயந்திர மாதிரி

```text
States:      idle → loading → success
                       ↓
                     error → (retry) → loading

Only defined transitions are allowed; you can't be in two states at once.
```

```js
const machine = {
  idle:    { FETCH: "loading" },
  loading: { SUCCESS: "success", ERROR: "error" },
  success: { FETCH: "loading" },
  error:   { RETRY: "loading" },
};
function transition(current, event) {
  return machine[current][event] ?? current; // only legal transitions happen
}
```

ஒரு `state` மாறி தற்போதைய நிலையைப் பிடிக்கிறது; ஒரு `event` *வரையறுக்கப்பட்ட* மாற்றத்தைத் தூண்டுகிறது. சட்டவிரோத மாற்றங்கள் (எ.கா. செயலற்ற நிலையில் SUCCESS) வெறுமனே நிகழ முடியாது — சாத்தியமற்ற நிலைகள் வடிவமைப்பின் மூலம் நீக்கப்பட்டுள்ளன.

## உண்மையான உலக கருவியாக்கம்: XState

```js
// libraries like XState formalize this with guards, actions, nested/parallel states
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## நிலை இயந்திரங்கள் எப்போது உதவுகின்றன

```text
✓ Complex flows with many states: checkout, multi-step forms/wizards, media players
✓ Authentication flows (logged out → logging in → logged in → refreshing)
✓ Anything where invalid state combinations cause bugs
✗ Overkill for simple toggles or trivial state
```

## ஏன் முக்கியமானது

நிலை இயந்திரங்கள் **செல்லாத நிலைகளை சாத்தியமற்றவை** மற்றும் மாற்றங்களை **வெளிப்படையாக** உருவாக்குவதன் மூலம் சிக்கலான நிலையான தர்க்கத்திற்கு கடுமை கொண்டு வருகிறது — boolean உடலளவு சேர்க்கைகளுக்குப் பதிலாக ஒரு தெளிவான, முழுமையான மாதிரி மாற்றுகிறது।

காந்தாரி (வழிகாட்டிகள், பணம் செலுத்துதல், அங்கீகாரம், மீடியா) போன்ற சிக்கலான ஓட்டங்களுக்கு அவை மிகவும் மূল்যவானவை, அங்கு boolean கலவை நுட்பமான, மீண்டும் உருவாக்க கடினமான பிழைகளுக்கு வழிவகுக்கிறது।

আনুষ্ঠানিকமாக கூட (`status` enum) ধারণা async நிலையை மேம்படுத்துகிறது; அধিকாரிকভাবে (XState) இটு காட்சிப்படுத்தக்கூடிய, சோதனையூக்கமான, শক্তিশালী தர্க்கத்தை வழங்குகிறது।

எப்போது அவற்றைப் பெற வேண்டும் என்பதை அறிவது பக்குவமான நிலை வடிவமைப்பின் அடையாளம்.