useSelector और useDispatch का उपयोग
In this page:
const value = useSelector(state => state.sliceName.value);
const dispatch = useDispatch();
dispatch({ type: "actionType", payload: data });useSelector से State पढ़ना
useSelector एक function लेता है जो पूरे Redux state को receive करता है और सिर्फ वह piece return करता है जो एक component को चाहिए। React-redux component को उस specific slice में subscribe करता है, इसलिए यह सिर्फ तब re-render होता है जब selected value असल में बदलती है, हर unrelated store update पर नहीं।
उदाहरण: Reading State with useSelector
// Run in your local React project (npm install required)
import { useSelector } from 'react-redux';
function ItemCount() {
const count = useSelector(state => state.cart.items.length);
return <p>Items: {count}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
useDispatch से Actions Dispatch करना
useDispatch() store का dispatch function directly return करता है, जो एक component को event handlers के अंदर dispatch(action) call करके state changes trigger करने देता है, बिल्कुल store.dispatch() manually call करने जैसा, लेकिन under the hood Context के through store से wired।
उदाहरण: Dispatching Actions with useDispatch
// Run in your local React project (npm install required)
import { useDispatch } from 'react-redux';
function AddButton() {
const dispatch = useDispatch();
return <button onClick={() => dispatch({ type: 'cart/addItem', payload: { id: 3 } })}>Add</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
दोनों को एक Component में Combine करना
ज़्यादातर components जो Redux के साथ interact करते हैं दोनों hooks साथ उपयोग करते हैं: current state दिखाने के लिए useSelector, और user actions के response में updates trigger करने के लिए useDispatch, store से एक complete read-and-write connection बनाते हुए।
उदाहरण: Combining Both in One Component
// Run in your local React project (npm install required)
import { useSelector, useDispatch } from 'react-redux';
function Cart() {
const items = useSelector(state => state.cart.items);
const dispatch = useDispatch();
return (
<div>
<p>{items.length} items</p>
<button onClick={() => dispatch({ type: 'cart/clear' })}>Clear Cart</button>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- सिर्फ ज़रूरी slice के बजाय पूरे state object को useSelector(state => state) से select करना, जो हर single change पर re-renders का कारण बनता है।
- useDispatch() call करना और actually returned function invoke करना भूल जाना।
- useSelector के अंदर inline एक नया object/array बनाना, unnecessary re-renders का कारण बनते हुए क्योंकि एक fresh reference last वाले जैसी कभी equal नहीं लगती।
- useSelector(fn) एक component को Redux store के एक specific slice में subscribe करता है, उस slice के बदलने पर re-render करते हुए।
- useDispatch() actions trigger करने के लिए store का dispatch function return करता है।
- सिर्फ वह specific data select करना जो एक component को चाहिए (पूरा state नहीं) unnecessary re-renders को minimize करता है।
- दोनों hooks react-redux से आते हैं और component को एक <Provider> के अंदर होना ज़रूरी है।
npm install react-redux (hooks API react-redux 7.1+ में जोड़ा गया) चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: