# Reducer Hook

ကျတော်တို့ အခုလေ့လာမှာကတော့ useReducer hook အကြောင်းပါပဲ&#x20;

ကျတော်တို့က react ကို လေ့လာတာက တော်တော်လေးခရီးရောက်ခဲ့ကြပါပြီ&#x20;

အဲဒီအတွက် ကျတော်တို့က အရေးကြီးတဲ့ အရာတွေကို ဆက်လေ့လာကြရတော့မှာပါ useReducer hook&#x20;

ဆိုတာက ကျတော်တို့ မြင်သာအောင် အလွယ်ပြောရရင် state management အတွက် ပါပဲ&#x20;

ကျတော်တို့က နောက်ပိုင်း state တွေက များလာတာနဲ့အမျှ complex တွေဖြစ်လာတဲ့အခါကျရင်&#x20;

ကျတော်တို့ ရဲ့ code တွေ က ရှုပ်ပွ လာတော့မှာပါ အဲဒါကို ကျတော်တို့က reducer hook ကိုအသုံးပြုပြီးတော့&#x20;

ကုဒ်တွေကိုရှင်းလင်းသွားအောင် ရေးလို့ရပါတယ်

သူ့ရဲ့အလုပ်လုပ်ပုံလေးက တော့ ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့ရဲ့ state တွေကို action အပေါ်&#x20;

မူတည်ပြီးတော့ ပြောင်းလဲ အလုပ်လုပ်သွားတာမျိုးပါ

ကျတော်တို့ စပြီးတော့ လေ့လာလိုက်ကြရအောင်

အရင်ဆုံး ဒီလိုလေး ရေးလိုက်ပါမယ်

```jsx
import { useReducer } from 'react'

function ReducerHook () {
    return (
        <div>Reducer Hook</div>
    )
}
export default ReducerHook
```

ကျတော်တို့ component တစ်ခုကိုအရင် တည်ဆောက်လိုက်ပါမယ်&#x20;

ပြီးသွားတဲ့အခါကျရင်ကျတော်တို့က reducer hook ကို ဒီလိုလေး အသုံးပြုလိုက်ပါမယ်

```jsx
import { useReducer } from 'react'

function ReducerHook () {
   const [ state , dispatch ] = useReducer( first /* this is callback function */,
   second /* this is initial state */, third /* this is optional */)
   return (
        <div>Reducer Hook</div>
    )
}
export default ReducerHook
```

ကျတော် ဒီကုဒ်လေးတွေကိုတချက်ရှင်းပြပေးပါမယ်

ပထမဆုံး ကျတော်တို့က useReducer လေးကို ဒီလိုလေးရေးလိုက်ပါမယ်

useReducer( first , second , third)

ပြောချင်တာက reducer hook တခုမှာ parameter ကို ၃ ခု လက်ခံပါတယ်&#x20;

အဲဒီ သုံးခုမှာက ကျတော်တို့အသုံးများတာက first နဲ့ second ပါပဲ third တခုက ကျတော့ optional ဆိုတော့&#x20;

သူ့ကို ကျတော်တို့ နောက်မှ ဆက်လေ့လာလိုက်ကြရအောင်

```jsx
const [ count , dispatch ] = useReducer( reducer , initialCount )
```

အဲဒီ၂ခု ကဘာတွေလည်းဆိုတော့ အပေါ်က ကုဒ်မှာ ရေးပြထားတဲ့အတိုင်းပါပဲ reducer ဆိုတဲ့&#x20;

callback function တခုနဲ့ initial state တစ်ခုပါပဲ&#x20;

သူက ဒီလို parameter ၂ခုကို တောင်းပြီးတော့ ဘာကို return ပြန်ပေးတာလည်းဆိုတော့ ကျတော်တို့ကို&#x20;

update ဖြစ်လာတဲ့ state နဲ့ dispatch ဆိုတဲ့ reducer callback ကို action လုပ်ပေးတဲ့ method လေးတခု&#x20;

ကို ပြန်ပေးပါတယ်&#x20;

reducer ဆိုတဲ့ callback function လေးက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့ useReducer&#x20;

ဆိုတဲ့ hook မှာ ဝင်လာတဲ့ initial state လေးကို လက်ခံပြီးတော့ သူ့ရဲ့ action ထဲကို dispatch ကနေပြီး တော့&#x20;

ဝင်လာမယ့် action type အပေါ်မူတည်ပြီးတော့ state ကို return ပြန်ပေးတာပါ

အရင်ဆုံး ကျတော်တို့ Counter app လေးတခုကို ဒီလိုလေး ရေးလိုက်ပါမယ်

ဘယ်လိုမျိုးလည်းဆိုတော့&#x20;

```jsx
import { useReducer } from 'react'

function ReducerHook () {
     const initailCount = 0;
     const reducer = (state, action) => {
          return state
     }
     const [ count , dispatch ] = useReducer( reducer , initialCount )
     return (
        <div>
             <h1> Count - {count} </h1>
             <button onClick={()=>{}}>Increase 1</button>
        </div>
    )
}
export default ReducerHook
```

ကျတော်တို့က ပထမဦးဆုံး ဘယ်လိုမျိုး state တွေကို ပြောင်းလဲမှာလည်းဆိုတော့ အဓိက ကျတာက&#x20;

dispatch နဲ့ action တွေပါပဲ အဲဒါကို ကျတော်တို့က ဘယ်လိုမျိုး ရေးရမှာလည်းဆိုတော့

ဒီလိုလေးရေးလိုက်ပါမယ်

```jsx
import { useReducer } from 'react'

function ReducerHook() {
  const initailCount = 0;
  const reducer = (state ,action) => {
    switch(action){
      case "INCREASE": {
        return state + 1
      }
      default : {
        return state
      }
    }
  }
  const [count, dispatch] = useReducer(reducer, initailCount)
  return (
    <div>
      <h1>Count - {count}</h1>
      <button onClick={() => {
        dispatch("INCREASE")
      }}>Increase 1</button>
    </div>
  )
}

export default ReducerHook
```

ကျတော်တို့က dispatch ရဲ့ parameter ထဲကို ကျတော်တို့က ပြောင်းလဲမှုလုပ်စေချင်တဲ့ action လေးကို သတ်မှတ် ပေးထားလိုက်ပါတယ်

အဲဒါကို ကျတော်တို့ရဲ့ reducer callback ထဲမှာ ဘယ်လိုမျိုး စောင့်ကြည့်ထားတာလည်းဆိုတော့ ကျတော်တို့က&#x20;

switch ဆိုတဲ့ condition စစ်တာလေးနဲ့ စောင့်ကြည့်ထားပါတယ် အဲဒါကို ကုဒ်လေးကိုကြည့်လိုက်ရင် မြင်သာပါလိမ့်မယ်

ဒီနေရမှာ if else နဲ့သုံးလို့မရဘူးလားလို့ မေးချင်လာပါလိမ့်မယ် ရပါတယ် ကြိုက်တာနဲ့သုံးလို့ရပါတယ်&#x20;

သူ့ကိုအလုပ်လုပ်တာကို browser မှာသွားကြည့်ရင် ဒီလိုလေး မြင်ရပါလိမ့်မယ်

<figure><img src="https://lh5.googleusercontent.com/T99obmBdbg1m6mI9nBSUfSLwf5MmSLBrxblVNjHdV8YtQweno3do9vrMDfF9-IpK5ydEHwyduZv3IPp1a1Negd5uqtDwA8Q5sxh4PHfhQgkRWiST9oYkAvgRDEdR_XWsfEal56aIlM3h6cYIfZGVC58" alt=""><figcaption></figcaption></figure>

ဒီလိုလေး ကျတော်တို့က state ကို လိုချင်တဲ့ action လေးတွေ သတ်မှတ်ပြီးတော့ လုပ်ခိုင်းတာဖြစ်တဲ့အတွက်&#x20;

ကျတော်တို့ရဲ့ state တွေကို management လုပ်တဲ့အခါမှာ တော်တော်လေး ရှင်းလင်းသွားတာကိုမြင်ရပါလိမ့်မယ်&#x20;

ကျတော်တို့က action ကိုပေးတဲ့အခါမှာ အခုက ကျတော်က string type အနေနဲ့ ပဲ ပေးလိုက်တာပါ&#x20;

တကယ်က ကျတော်တို့က နောက်ထပ် object အနေနဲ့ သတ်မှတ်ပြီးတော့ပေးလို့ရပါတယ်

ဘယ်လိုမျိုးလည်းဆိုတော့

```jsx
{ type : “type”, payload: “payload” }
```

ဒီလိုလေးပေးပြီးတော့ ကျတော်တို့ ကုဒ်ကို ဒီလိုလေးပြင်လိုက်ပါမယ် ဗျ

```jsx
import { useReducer } from 'react'

function ReducerHook() {
  const initailCount = 0;
  const reducer = (state ,action) => {
    switch(action.type){
      case "INCREASE": {
        return state + action.payload
      }
      default : {
        return state
      }
    }
  }
  const [count, dispatch] = useReducer(reducer, initailCount)
  return (
    <div>
      <h1>Count - {count}</h1>
      <button onClick={() => {
        dispatch({type: "INCREASE" , payload:1})
      }}>Increase 1</button>
      <button onClick={() => {
        dispatch({type: "INCREASE", payload: 5})
      }}>Increase By Amount</button>
    </div>
  )
}

export default ReducerHook
```

ဒီလိုလေးရေးလိုက်ရုံပဲဆိုတော့ ကျတော်တို့ရဲ့ code တွေက တော်တော်လေး ရှင်းသွားတာကိုမြင်သွားမယ်လို့ထင်ပါတယ်
