प्रतिक्रिया useReducer
हुक
हुक हुक के useReducer
समान है useState
।
यह कस्टम राज्य तर्क के लिए अनुमति देता है।
यदि आप जटिल तर्क पर भरोसा करने वाले राज्य के कई टुकड़ों पर नज़र रखते हैं, useReducer
तो यह उपयोगी हो सकता है।
वाक्य - विन्यास
useReducer Hook दो तर्कों को स्वीकार करता है।
useReducer(<reducer>, <initialState>)
reducer
फ़ंक्शन में आपका कस्टम स्टेट लॉजिक होता है और यह एक initialState
साधारण मान हो सकता है लेकिन आम तौर पर इसमें एक ऑब्जेक्ट होता है।
useReducer
हुक वर्तमान 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
अधिक क्रियाओं को जोड़कर एक ही हुक में समाहित किए जा सकते हैं।