Redux की Typing
In this page:
interface SliceState {
propertyName: type;
}
function reducerName(state: SliceState = initialState, action: ActionType): SliceState {
return state;
}Redux State Define करना
Redux state define करना slice के shape के लिए एक typed interface से शुरू होता है, जो इसके reducer का return type और वह type बन जाता है जिस पर उस slice से पढ़ने वाला हर component rely कर सकता है।
उदाहरण: Defining Redux State
interface CounterState {
value: number;
}
const initialState: CounterState = { value: 0 };
function counterReducer(state = initialState, action: { type: string }): CounterState {
return state;
}
console.log(counterReducer(undefined, { type: "init" }));Payloads को Type करना
Action payloads को type करने का मतलब है हर action के payload field का अपना specific type है जो match करता है कि वह action असल में क्या carry करता है, इसलिए गलत payload shape के साथ एक action dispatch करना runtime से पहले पकड़ा जाता है।
उदाहरण: Typing Payloads
interface IncrementAction {
type: "increment";
payload: number;
}
const action: IncrementAction = { type: "increment", payload: 5 };
console.log(action);Redux Store को Type करना
Store को खुद type करने का आमतौर पर मतलब है RootState (store के अपने getState से infer किया गया) और AppDispatch types export करना, जिन्हें app में हर typed hook फिर से redefine करने के बजाय reuse करता है।
उदाहरण: Typing the Redux Store
interface RootState {
counter: { value: number };
}
// type AppDispatch = typeof store.dispatch;
const state: RootState = { counter: { value: 0 } };
console.log(state);Typed React Redux Hooks
Typed React-Redux hooks generic useSelector और useDispatch को आपके app के specific RootState और AppDispatch types के साथ wrap करके बनाए जाते हैं, इसलिए हर component बिना generics दोहराए पूरी तरह typed access पाता है।
उदाहरण: Typed React Redux Hooks
interface RootState {
counter: { value: number };
}
// const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
function selectCount(state: RootState): number {
return state.counter.value;
}
console.log(selectCount({ counter: { value: 3 } }));Selectors और Redux Data को Type करना
Selectors को type करने का मतलब है उनके input को RootState और उनके return type को वह specific slice या derived value annotate करना जो वे extract करते हैं, एक state path में typo को silent undefined return करने के बजाय immediately पकड़ते हुए।
उदाहरण: Typing Selectors and Redux Data
interface RootState {
user: { name: string } | null;
}
function selectUserName(state: RootState): string | undefined {
return state.user?.name;
}
console.log(selectUserName({ user: { name: "Ravi" } }));- Reducer में
stateकोanytyped करना, इसलिए state shape में mistakes कभी पकड़ी नहीं जातीं। - Actions को per action एक specific type के बजाय एक loose
payload: anyदेना। - Typed versions के बिना plain
useSelectorऔरuseDispatchउपयोग करना, इसलिएstateunknown है और dispatches unchecked हैं।
- एक React TypeScript project props, state, और events को type करता है इसलिए components compile time पर check होते हैं।
useState,useEffect, औरuseRefजैसे hooks को वे data describe करने के लिए typed किया जा सकता है जो वे रखते हैं।- Context API और Redux को भी typed किया जा सकता है ताकि shared data components में consistent रहे।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: