Reducer Hook

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

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

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

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

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

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

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

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

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

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

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

import { useReducer } from 'react'

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

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

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

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 ကို ၃ ခု လက်ခံပါတယ်

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

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

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

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

callback function တခုနဲ့ initial state တစ်ခုပါပဲ

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

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

ကို ပြန်ပေးပါတယ်

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

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

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

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

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

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 တွေကို ပြောင်းလဲမှာလည်းဆိုတော့ အဓိက ကျတာက

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

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

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 ထဲမှာ ဘယ်လိုမျိုး စောင့်ကြည့်ထားတာလည်းဆိုတော့ ကျတော်တို့က

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

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

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

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

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

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

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

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

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

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

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 တွေက တော်တော်လေး ရှင်းသွားတာကိုမြင်သွားမယ်လို့ထင်ပါတယ်