React useReducer
Hook
Hook သည် useReducer
Hook နှင့်ဆင်တူသည် useState
။
၎င်းသည် စိတ်ကြိုက်ပြည်နယ်ဆိုင်ရာ ယုတ္တိဗေဒအတွက် ခွင့်ပြုသည်။
ရှုပ်ထွေးသော ယုတ္တိဗေဒကို အားကိုးသော နိုင်ငံအများအပြားကို ခြေရာခံမိပါက useReducer
အသုံးဝင်ပေမည်။
အထားအသို
useReducer Hook သည် အကြောင်းပြချက်နှစ်ခုကို လက်ခံသည်။
useReducer(<reducer>၊ <initialState>)
reducer
လုပ်ဆောင်ချက်တွင် သင်၏ စိတ်ကြိုက်နိုင်ငံတော် လော့ဂျစ်ပါရှိပြီး ရိုးရှင်းသော initialState
တန်ဖိုးတစ်ခု ဖြစ်နိုင်သော်လည်း ယေဘုယျအားဖြင့် အရာဝတ္ထုတစ်ခု ပါဝင်မည်ဖြစ်သည်။
useReducer
Hook သည် လက်ရှိ နှင့် state
နည်းလမ်းတစ်ခုကို dispatch
ပြန်ပေးသည်။
ဤသည်မှာ useReducer
တန်ပြန်အက်ပ်တစ်ခု၏ ဥပမာတစ်ခုဖြစ်သည်။
ဥပမာ-
import { useReducer } from "react";
import ReactDOM from "react-dom";
const initialTodos = [
{
id: 1,
title: "Todo 1",
complete: false,
},
{
id: 2,
title: "Todo 2",
complete: false,
},
];
const reducer = (state, action) => {
switch (action.type) {
case "COMPLETE":
return state.map((todo) => {
if (todo.id === action.id) {
return { ...todo, complete: !todo.complete };
} else {
return todo;
}
});
default:
return state;
}
};
function Todos() {
const [todos, dispatch] = useReducer(reducer, initialTodos);
const handleComplete = (todo) => {
dispatch({ type: "COMPLETE", id: todo.id });
};
return (
<>
{todos.map((todo) => (
<div key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.complete}
onChange={() => handleComplete(todo)}
/>
{todo.title}
</label>
</div>
))}
</>
);
}
ReactDOM.render(<Todos />, document.getElementById('root'));
ဤအရာသည် ပြီးပြည့်စုံသော အခြေအနေကို ခြေရာခံရန် ယုတ္တိမျှသာဖြစ်သည်။
လုပ်စရာ တစ်ခုကို ထည့်ရန်၊ ဖျက်ရန်နှင့် ပြီးမြောက်ရန် ယုတ္တိဗေဒအားလုံးကို
useReducer
နောက်ထပ်လုပ်ဆောင်ချက်များကို ထည့်သွင်းခြင်းဖြင့် Hook တစ်ခုတည်းအတွင်းတွင် ထည့်သွင်းနိုင်သည်။