State Architecture with useReducer

State Architecture with useReducer မှာ state တစ်ခုချင်းစီ၏ owner, source of truth, update event နဲ့ derived value ကိုရှင်းလင်းစွာခွဲပါ။ State ကိုတိုက်ရိုက်မပြောင်းဘဲ immutable update လုပ်ပြီး user intent ကို event handler သို့ reducer action ဖြင့်ဖော်ပြပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

State Architecture with useReducer မှာ state တစ်ခုချင်းစီ၏ owner, source of truth, update event နဲ့ derived value ကိုရှင်းလင်းစွာခွဲပါ။ State ကိုတိုက်ရိုက်မပြောင်းဘဲ immutable update လုပ်ပြီး user intent ကို event handler သို့ reducer action ဖြင့်ဖော်ပြပါ။

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

State Architecture with useReducer example ကို empty/loading/error states, keyboard-only interaction, slow network, rapid repeated events နဲ့ component unmount/remount cases ဖြင့်စမ်းပါ။ Browser console, React DevTools, tests နဲ့ profiler ကိုလိုအပ်သလိုအသုံးပြုပြီး behavior ကိုအတည်ပြုပါ။

ဒီသင်ခန်းစာပြီးရင်

• Source of truth နဲ့ component boundary ကိုရှင်းပြနိုင်ခြင်း
• Keyboard နှင့် failure state ပါသော example ရေးနိုင်ခြင်း
• User-visible behavior တစ်ခုကို test သို့ profiler ဖြင့်စစ်နိုင်ခြင်း

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'reset': return { count: 0 };
    default: throw Error('Unknown action: ' + action.type);
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return <>
    <p>Count: {state.count}</p>
    <button onClick={() => dispatch({ type: 'increment' })}>Add</button>
    <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
  </>;
}

Reducer က increment နဲ့ reset user actions များကို သီးခြားကိုင်တွယ်မည်။

Extracting State Logic into a Reducer — React