Redux का परिचय
function reducer(state = initialState, action) {
switch (action.type) {
case "actionType":
return { ...state, key: action.payload };
default:
return state;
}
}
const store = createStore(reducer);
<Provider store={store}><App /></Provider>Redux के Core Concepts
Redux तीन ideas पर centered है: एक single store जो सारा state रखता है, actions जो describe करते हैं कि क्या हुआ (एक type के साथ plain objects), और reducers, pure functions जो old state और एक action से नया state compute करते हैं।
यह one-way data flow state changes को predictable और traceable बनाता है।
उदाहरण: The Core Redux Concepts
// Run in your local React project (npm install required)
import { createStore } from 'redux';
function counterReducer(state = { count: 0 }, action) {
if (action.type === 'increment') return { count: state.count + 1 };
return state;
}
const store = createStore(counterReducer);
store.dispatch({ type: 'increment' });
console.log(store.getState()); // count is now 1⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Redux को React से Connect करना
react-redux package Redux के plain-JavaScript store को React components से bridge करता है। अपने app को <Provider store={store}> में wrap करना store को हर जगह available कराता है, और useSelector/useDispatch जैसे hooks components को state पढ़ने और actions dispatch करने देते हैं।
उदाहरण: Connecting Redux to React
// Run in your local React project (npm install required)
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<Provider store={store}>
<App />
</Provider>
);⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Redux कब उपयोग करें
Redux real setup overhead (store, reducers, actions) जोड़ता है, इसलिए यह उस state के लिए सबसे valuable है जो complex है, बार-बार बदलता है, या एक बड़े app के कई unrelated parts में share होना चाहिए।
Simpler apps के लिए, Context API या component-local useState अक्सर अपने आप में काफी है।
उदाहरण: When to Reach for Redux
// Run in your local React project (npm install required)
// Simple local state: no Redux needed
function Counter() {
const [count, setCount] = React.useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// Complex, widely-shared state (auth, cart, notifications across the whole app):
// that's when Redux's centralized store starts to pay off.- एक reducer के अंदर state object को directly mutate करना, नया object return करने के बजाय।
- सारा app state Redux में डालना, simple local UI state भी जिसे एक single component useState से manage कर सकता है।
- App को <Provider store={store}> में wrap करना भूल जाना, इसलिए connected components store access नहीं कर पाते।
- Redux एक standalone state-management library है, जो अक्सर react-redux के through React के साथ उपयोग होती है।
- Store पूरे app का state एक जगह रखता है, जो सिर्फ dispatched actions के through update होता है।
- Reducers pure functions हैं जो current state और एक action लेते हैं, नया state return करते हुए।
- हर चीज़ को Redux की ज़रूरत नहीं होती — यह complex, widely-shared state के लिए shine करता है, simple local state के लिए नहीं।
npm install redux react-redux चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: