Redux Toolkit की Basics
In this page:
const sliceName = createSlice({
name: "sliceName",
initialState: { value: 0 },
reducers: {
actionName(state, action) {
state.value += action.payload;
},
},
});
export const { actionName } = sliceName.actions;
export default sliceName.reducer;
const store = configureStore({ reducer: { sliceName: sliceName.reducer } });Redux Toolkit क्यों Exists करता है
Plain Redux में action types, action creators, और reducers को अलग, repetitive pieces के रूप में लिखना पड़ता है। Redux Toolkit इस सबको कम, friendlier functions में bundle करता है, जिससे classic Redux को heavy बनाने वाला ज़्यादातर boilerplate कट जाता है।
उदाहरण: Why Redux Toolkit Exists
// Run in your local React project (npm install required)
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: { counter: counterReducer },
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
createSlice से State Define करना
createSlice एक name, initial state, और reducer functions का एक object लेता है, और आपके लिए automatically matching action creators और एक reducer generate करता है।
आप जो भी function define करते हैं वह दोनों बन जाता है — एक action जो dispatch कर सकते हैं, और वह logic जो dispatch होने पर चलती है।
उदाहरण: Defining State with createSlice
// Run in your local React project (npm install required)
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: state => { state.count += 1; },
},
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer;⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Component में Slice उपयोग करना
Slice और store set up होने के बाद, एक component state पढ़ने और generated action creators dispatch करने के लिए react-redux के same useSelector और useDispatch hooks उपयोग करता है, बिल्कुल plain Redux जैसे — RTK ने सिर्फ यह बदला कि store/reducer कैसे लिखे जाते हैं, components उन्हें कैसे consume करते हैं वह नहीं।
उदाहरण: Using the Slice in a Component
// Run in your local React project (npm install required)
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';
function Counter() {
const count = useSelector(state => state.counter.count);
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>Count: {count}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- अब भी switch-statement reducers हाथ से लिखना createSlice के simpler syntax उपयोग करने के बजाय।
- यह भूल जाना कि Redux Toolkit का Immer integration आपको एक slice reducer के अंदर directly state mutate करने देता है — यह यहां expected है, plain Redux के विपरीत।
- configureStore में एक नई slice का reducer register न करना, इसलिए उसके actions का कोई effect नहीं होता।
- Redux Toolkit (RTK) Redux logic लिखने का officially recommended तरीका है, boilerplate को significantly कम करते हुए।
- createSlice action creators और एक reducer एक साथ, एक single object से generate करता है।
- configureStore createStore को sensible defaults (जैसे DevTools support) built-in के साथ replace करता है।
- RTK internally Immer उपयोग करता है, इसलिए slice reducers mutating code लिख सकते हैं जो असल में immutably apply होता है।
npm install @reduxjs/toolkit react-redux चाहिए — इस sandbox में CDN से उपलब्ध नहीं है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: