Use Reducer and Use State

const [value, dispatch] = useReducer(reducer, initialValue);
const [count, setCount] = useState(0);

Use State နဲ့ Use Reducer နှစ်ခုစလုံးက state management အတွက်ဖြစ်တယ်။ အကြောင်းအရာတစ်ခုခုကို ပြောင်းလဲ ချင်ရင် ဒီ Hook နှစ်ခုထဲက တစ်ခု ကို အသုံးပြုပြီး dyanmic ဖြစ်အောင် ပြောင်းလဲလို့ရပါတယ်။ သို့သော် ဘယ် Hook ကို ဘယ်နေရာမှာသုံးရမလဲ ဘယ်လို အခြေအနေမှာအသုံးပြုရမလဲ။

Data Type

တစ်ဂယ်လို့ သင်က primitive data types တွေဖြစ်တဲ့ string, boolean, number types တွေကို ပြောင်းလဲသက်မှတ်မယ်ဆိုရင် Use state ကသင့်တော်ပြီး objects, array တွေကိုပြောင်းလဲသက်မှတ်မယ်ဆိုရင် use reducer ကသင့်တော်ပါတယ်။

Number of State Transition

ပြောင်းလဲရမယ့် state တွေက တစ်ခုနှစ်ခုလောက်ပါရင် use state နဲ့အဆင်ပြေစွာ အသုံးပြုလို့ရပြီး ပြောင်းလဲရမယ့် state တွေများတယ်ဆိုရင် use reducer နဲ့အသုံးပြုသင့်ပါတယ်။

Related State Transition

 const [count, setCount] = useState(0);

ပြောင်းလဲရမယ့် state တွေက တစ်ခုနှင့်တစ်ခုချိတ်ဆက်မှု့ ရှိမနေရင် use state ကိုအသုံးပြုသင့်ပြီး

const initialValue = {
    loading: true,
    result: [],
    error: null
};

ပြောင်းလဲရမယ့် state တွေက တစ်ခုနှင့်တစ်ခု ဆက်နွယ်နေမယ်ဆိုရင် use reducer ကိုအသုံးပြုသင့်ပါတယ်။

Business Logic

ရှုပ်ထွေးတဲ့ business logic တွေမပါဘဲ ရိုးရိုးရှင်းရှင်း logic တွေမှာဆိုရင် use state ကိုအသုံးပြုသင့်ပြီး ရှုပ်ထွေးတဲ့ business logic တွေမှာဆိုရင် use reducer ကိုသုံးသင့်ပါတယ်။

Local and Global

return (
     <div>
    <CountContext.Provider value={{countDispatch:dispatch}}>
      {value.firstValue}
      {value.secoundValue}
      {count}
      <button onClick={()=>setCount((prev)=>prev+1)}></button>
      <CounterTwo />
      <CounterOne/>
      </CountContext.Provider>
      </div>
  );

နောက်ဆုံးတစ်ချက်ကတော့ use state ကို local state management တွေမှာ အများဆုံးအသုံးပြုသင့်ပြီး use reducer ကိုတော့ use context နှင့် တွဲပြီး global state management တွေမှာ အသုံးပြုသင့်ပါတယ်။