प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर
परिकलित स्टेट के लिए प्रकारयुक्त सिलेक्टर फ़ंक्शन लिखें
प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर, CoddyKit पर TypeScript Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह TypeScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Derived State क्या है
Derived state वह state है जिसकी गणना किसी अन्य state से की जाती है — जैसे किसी सूची को filter करना या मानों का योग निकालना। Selectors इस गणना को समाहित करते हैं और performance के लिए memoize किए जा सकते हैं।
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);टाइपयुक्त Selector Functions
वे क्या गणना करते हैं, यह स्पष्ट करने और type drift रोकने के लिए स्पष्ट return types वाली selector functions लिखें।
import type { RootState } from "./store";
const selectActiveUsers = (state: RootState): User[] =>
state.users.filter((u) => u.isActive);
const selectUserCount = (state: RootState): number =>
state.users.length;reselect: Memoized Selectors
reselect लाइब्रेरी (जिसका उपयोग RTK करता है) memoized selectors बनाती है, जो केवल अपने inputs बदलने पर दोबारा गणना करती हैं।
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]टाइपयुक्त Parameterized Selectors
Factory selectors arguments स्वीकार करके एक selector लौटाते हैं — यह प्रत्येक entity को अलग-अलग खोजने के लिए उपयोगी है।
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Zustand Selectors
Zustand में केवल आवश्यक slice पढ़ने के लिए store hook में टाइपयुक्त selector पास करें।
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]useMemo के साथ React में Derived State
स्थानीय derived state के लिए कंपोनेंट में computed values को memoize करने हेतु उचित type annotations के साथ useMemo का उपयोग करें।
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Selectors को संयोजित करना
सरल selectors को संयोजित करके जटिल selectors बनाएँ — reselect पूरी श्रृंखला में memoization संभालता है।
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Derived Updates के लिए immer के साथ टाइप-सुरक्षित Zustand
Derived updates की गणना करते समय draft state को mutate करने के लिए immer का उपयोग करें — TypeScript सुनिश्चित करता है कि केवल मान्य properties को बदला जाए।
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Selector Return Type का अनुमान
TypeScript selectors से return types का अनुमान लगा लेता है, लेकिन स्पष्ट annotations पठनीयता सुधारते हैं और dynamic expressions से अनजाने में any आने से रोकते हैं।
// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
(s: RootState) => s.cart.items,
(items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);Selectors की Testing
Selectors pure functions होते हैं — mock state पास करके और output type तथा value की पुष्टि करके उनका test करें।
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});पुनरावलोकन: टाइपयुक्त Selectors
टाइपयुक्त selectors: RootState लेने वाली functions को स्पष्ट return types के साथ लिखें, memoization के लिए createSelector का उपयोग करें, जटिल derivations के लिए selectors को संयोजित करें और pure functions के रूप में उनका test करें।
त्वरित जाँच
साधारण selector function की तुलना में createSelector क्या लाभ प्रदान करता है?
आपने क्या सीखा
टाइपयुक्त selectors RootState लेते हैं और सटीक प्रकार वाले derived values लौटाते हैं। memoization के लिए createSelector का उपयोग करें, जटिल logic के लिए selectors को संयोजित करें और parameterized entity lookups के लिए factory selectors लिखें।
एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 101
- पाठ
- 352
अक्सर पूछे जाने वाले प्रश्न
क्या “प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर” पाठ निःशुल्क है?
हाँ—“प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और TypeScript Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर” में मैं क्या सीखूँगा?
परिकलित स्टेट के लिए प्रकारयुक्त सिलेक्टर फ़ंक्शन लिखें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ TypeScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या TypeScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर TypeScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस TypeScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर TypeScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Redux Toolkit स्लाइस और थंक के प्रकार
- Zustand स्टोर के प्रकार निर्धारण के पैटर्न
- XState: प्रकारयुक्त स्टेट मशीन
- प्रकारों के साथ व्युत्पन्न स्टेट और सिलेक्टर