Store, Actions और Reducers
In this page:
// Action: a plain object
{ type: "domain/actionName", payload: data }
// Reducer: (state, action) => newState
function reducer(state = initialState, action) {
switch (action.type) {
case "domain/actionName":
return { ...state, key: action.payload };
default:
return state;
}
}एक Action की Anatomy
एक action बस एक plain JavaScript object है जिसमें, कम से कम, एक type field होता है — एक string जो describe करती है कि क्या हुआ, जैसे 'cart/addItem'।
वह action process करने के लिए ज़रूरी कोई भी additional data (जैसे कौन सा item जोड़ा गया) आमतौर पर एक payload field के रूप में include होता है।
उदाहरण: Anatomy of an Action
// Run in your local React project (npm install required)
const addItemAction = {
type: 'cart/addItem',
payload: { id: 1, name: 'Book' },
};
store.dispatch(addItemAction);एक Reducer की Anatomy
एक reducer एक function है जो current state और एक action लेता है, और next state return करता है। यह pure होना चाहिए — same inputs दिए जाने पर, यह हमेशा same output produce करता है, कोई API calls नहीं, कोई mutations नहीं, और कोई randomness नहीं।
उदाहरण: Anatomy of a Reducer
// Run in your local React project (npm install required)
function cartReducer(state = { items: [] }, action) {
switch (action.type) {
case 'cart/addItem':
return { items: [...state.items, action.payload] };
default:
return state;
}
}One-Way Data Flow
Redux एक strict cycle enforce करता है: एक component एक action dispatch करता है, reducer उससे नया state compute करता है, store update होता है, और वह state पढ़ने वाला कोई भी component नई value के साथ re-render होता है।
यह predictable, one-directional flow ही Redux apps को debug और reason about करने में आसान बनाता है।
उदाहरण: The One-Way Data Flow
// Run in your local React project (npm install required)
// 1. Component dispatches:
dispatch({ type: 'cart/addItem', payload: { id: 2, name: 'Pen' } });
// 2. Reducer computes new state (shown above)
// 3. Store updates internally
// 4. useSelector(state => state.cart.items) re-runs in any subscribed component
// 5. That component re-renders with the new items array- दो अलग actions को एक जैसा type string देना, जो एक को accidentally दूसरे की logic trigger करने का कारण बनता है।
- Side effects (API calls, timers) को directly एक reducer के अंदर डालना, middleware या एक component में डालने के बजाय।
- Reducer के default case से undefined return करना, unchanged state return करने के बजाय।
- एक action एक plain object है जिसमें एक type field होता है जो describe करती है कि क्या हुआ, plus optional data (payload)।
- एक reducer एक pure function है: (state, action) => newState, कोई side effects नहीं।
- Store का dispatch(action) function state update trigger करने का इकलौता तरीका है।
- Reducers को हमेशा एक value return करनी चाहिए, उन actions के लिए unchanged state भी शामिल जिन्हें वे नहीं पहचानते।
npm install redux (या @reduxjs/toolkit) चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: