अनस्टैटेड-नेक्स्ट: एक रिएक्ट एप्लिकेशन का मिनिमिस्ट स्टेट मैनेजमेंट

प्रतिक्रिया घटकों के राज्य प्रबंधन के लिए 200 बाइट्स

• प्रतिक्रिया हुक : यह सब राज्य का प्रबंधन करने के लिए लेता है।
• ~ 200 बाइट्स , मिन + जीजी।
• परिचित एपीआई : हमेशा की तरह प्रतिक्रिया का उपयोग करें।
• न्यूनतम एपीआई : यह पता लगाने के लिए पांच मिनट पर्याप्त है।
• ऑटोमैटिक टाइप इंट्रेंस प्रदान करने के लिए टाइपस्क्रिप्ट में लिखा गया है ।

मुख्य सवाल यह है कि क्या यह पैकेज Redux से बेहतर है? खैर ...

• वह कम है। यह 40 गुना छोटा है।
• वह तेज है। घटक-स्तर के प्रदर्शन के मुद्दों को अलग करें।
• यह सीखना आसान है। किसी भी मामले में, आपको रिएक्ट हुक और संदर्भ का उपयोग करने में सक्षम होने की आवश्यकता है, वे शांत हैं।
• एकीकृत करना आसान है। अन्य प्रतिक्रिया पुस्तकालयों के साथ संगतता को तोड़ने के बिना एक समय में एक घटक कनेक्ट करें।
• यह परीक्षण करने के लिए आसान है। रीड्यूसर का अलग से परीक्षण करना समय की बर्बादी है, स्वयं रिएक्ट घटकों का परीक्षण सरल करें।
• यह टाइपिंग के मामले में सरल है। यह लिखा जाता है ताकि प्रकार के अनुमान का अधिकतम उपयोग किया जा सके।
• वह न्यूनतर है। यह सिर्फ रिएक्ट है।

कोड उदाहरण

import React, { useState } from "react" import { createContainer } from "unstated-next" import { render } from "react-dom" function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } let Counter = createContainer(useCounter) function CounterDisplay() { let counter = Counter.useContainer() return ( <div> <button onClick={counter.decrement}>-</button> <span>{counter.count}</span> <button onClick={counter.increment}>+</button> </div> ) } function App() { return ( <Counter.Provider> <CounterDisplay /> <CounterDisplay /> </Counter.Provider> ) } render(<App />, document.getElementById("root")) 

अनीति के प्रति दृष्टिकोण

मैं (जेमी काइल - लगभग।) इस पुस्तकालय को अनारक्षित के उत्तराधिकारी के रूप में मानता हूं । मैंने अनस्टैट किया क्योंकि मुझे विश्वास था कि रिएक्ट ने ही राज्य के प्रबंधन का एक बड़ा काम किया था, और इसमें सामान्य राज्य और तर्क को अलग करने के लिए केवल एक सरल तंत्र का अभाव था। इसलिए, मैंने इस समस्या के लिए "न्यूनतम" समाधान के रूप में अनस्ट्रेटेड बनाया।

हुक के आगमन के साथ, प्रतिक्रिया सामान्य स्थिति और तर्क को उजागर करने के मामले में बहुत बेहतर हो गई है। इतना बेहतर है कि, मेरे दृष्टिकोण से, अनस्ट्रेस्ड एक अनावश्यक अमूर्त बन गया है।

कम नहीं , मेरा मानना ​​है कि कई डेवलपर्स को इस बात का बहुत कम अंदाजा है कि रिएक्ट हुक का उपयोग करके तर्क और एप्लिकेशन की सामान्य स्थिति को कैसे अलग किया जाए। यह केवल प्रलेखन और समुदाय की जड़ता की अपर्याप्त गुणवत्ता के कारण हो सकता है, लेकिन मेरा मानना ​​है कि एक स्पष्ट एपीआई इस कमी को ठीक करने में सक्षम है।

अनस्टैटेड नेक्स्ट यह बहुत ही एपीआई है। "रिएक्ट में राज्य और तर्क को साझा करने के लिए न्यूनतम एपीआई" होने के बजाय, अब यह "रिएक्ट में राज्य और तर्क को साझा करने के तरीके को समझने के लिए न्यूनतम एपीआई है।"

मैं वास्तव में रिएक्ट को पसंद करता हूं, मैं चाहता हूं कि रिएक्ट फूल जाए। मैं पसंद करूंगा कि समुदाय Redux जैसे राज्य के प्रबंधन के लिए बाहरी पुस्तकालयों के उपयोग को छोड़ दे, और अंत में पूरी ताकत से रिएक्ट में निर्मित उपकरणों का उपयोग करना शुरू कर दे।

अगर, अनस्टैटेड का उपयोग करने के बजाय, आप सिर्फ रिएक्ट का उपयोग करते हैं - मैं इसका स्वागत करूंगा। अपने ब्लॉग पर इसके बारे में लिखें! सम्मेलनों में इसके बारे में बात करो! अपने ज्ञान को समुदाय के साथ साझा करें।

अनस्टैटेड-नेक्स्ट गाइड

यदि आप अभी तक रिएक्ट हुक से परिचित नहीं हैं, तो मेरा सुझाव है कि आप पढ़ना और पढ़ना बंद कर दें
प्रतिक्रिया वेबसाइट पर उत्कृष्ट प्रलेखन ।

तो, हुक की मदद से आप इस घटक जैसा कुछ लिख सकते हैं:

 function CounterDisplay() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return ( <div> <button onClick={decrement}>-</button> <p>You clicked {count} times</p> <button onClick={increment}>+</button> </div> ) } 

यदि घटक तर्क को कई स्थानों पर उपयोग करने की आवश्यकता है, तो इसे बाहर निकाला जा सकता है
एक अलग कस्टम हुक में:

 function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } function CounterDisplay() { let counter = useCounter() return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } 

लेकिन क्या करें जब आपको सामान्य स्थिति की आवश्यकता हो, और सिर्फ तर्क न हो?
संदर्भ यहां उपयोगी है:

 function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } let Counter = createContext(null) function CounterDisplay() { let counter = useContext(Counter) return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } function App() { let counter = useCounter() return ( <Counter.Provider value={counter}> <CounterDisplay /> <CounterDisplay /> </Counter.Provider> ) } 

यह अद्भुत और अद्भुत है; जितना अधिक लोग इस शैली में लिखते हैं, उतना बेहतर है।

हालाँकि, यह थोड़ा अधिक संरचना और स्पष्टता जोड़ने के लायक है ताकि एपीआई आपके इरादों को बहुत स्पष्ट रूप से व्यक्त करे।

ऐसा करने के लिए, हमने createContainer() फ़ंक्शन को जोड़ा, ताकि आप अपने कस्टम हुक को "कंटेनर" के रूप में createContainer() सकें, ताकि हमारा कुरकुरा और स्पष्ट API गलत तरीके से उपयोग करना असंभव हो।

 import { createContainer } from "unstated-next" function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } let Counter = createContainer(useCounter) function CounterDisplay() { let counter = Counter.useContainer() return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } function App() { return ( <Counter.Provider> <CounterDisplay /> <CounterDisplay /> </Counter.Provider> ) } 

हमारे परिवर्तनों से पहले और बाद में घटक पाठ की तुलना करें:

 - import { createContext, useContext } from "react" + import { createContainer } from "unstated-next" function useCounter() { ... } - let Counter = createContext(null) + let Counter = createContainer(useCounter) function CounterDisplay() { - let counter = useContext(Counter) + let counter = Counter.useContainer() return ( <div> ... </div> ) } function App() { - let counter = useCounter() return ( - <Counter.Provider value={counter}> + <Counter.Provider> <CounterDisplay /> <CounterDisplay /> </Counter.Provider> ) } 

यदि आप टाइपस्क्रिप्ट में लिखते हैं (और यदि नहीं, तो मैं दृढ़ता से अनुशंसा करता हूं कि आप अपने आप को इसके साथ परिचित करें), आपको बेहतर प्रकार का निष्कर्ष भी मिलेगा। यदि आपका कस्टम हुक दृढ़ता से टाइप किया गया है, तो अन्य सभी प्रकार के आउटपुट स्वचालित रूप से काम करेंगे।

एपीआई

createContainer(useHook)

 import { createContainer } from "unstated-next" function useCustomHook() { let [value, setValue] = useState() let onChange = e => setValue(e.currentTarget.value) return { value, onChange } } let Container = createContainer(useCustomHook) // Container === { Provider, useContainer } 

<Container.Provider>

 function ParentComponent() { return ( <Container.Provider> <ChildComponent /> </Container.Provider> ) } 

Container.useContainer()

 function ChildComponent() { let input = Container.useContainer() return <input value={input.value} onChange={input.onChange} /> } 

useContainer(Container)

 import { useContainer } from "unstated-next" function ChildComponent() { let input = useContainer(Container) return <input value={input.value} onChange={input.onChange} /> } 

टिप्स

टिप # 1: मर्जिंग कंटेनर

चूंकि हम कस्टम हुक के साथ काम कर रहे हैं, इसलिए हम अन्य हुक के अंदर कंटेनरों को जोड़ सकते हैं।

 function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment, setCount } } let Counter = createContainer(useCounter) function useResettableCounter() { let counter = Counter.useContainer() let reset = () => counter.setCount(0) return { ...counter, reset } } 

टिप # 2: छोटे कंटेनरों का उपयोग करें

कंटेनरों को सबसे अच्छा बनाया जाता है और स्पष्ट रूप से एक विशिष्ट कार्य पर केंद्रित होता है। यदि आपको कंटेनरों में अतिरिक्त व्यावसायिक तर्क की आवश्यकता है - अलग-अलग हुक में नए संचालन करें, और राज्य को कंटेनरों में संग्रहीत करने दें।

 function useCount() { return useState(0) } let Count = createContainer(useCount) function useCounter() { let [count, setCount] = Count.useContainer() let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) let reset = () => setCount(0) return { count, decrement, increment, reset } } 

टिप # 3: घटक अनुकूलन

unstated-next लिए कोई अलग "अनुकूलन" नहीं है, प्रतिक्रिया घटकों के अनुकूलन के लिए सामान्य तरीके पर्याप्त हैं।

1) घटकों को विभाजित करके भारी उपप्रकारों का अनुकूलन।

करने के लिए:

 function CounterDisplay() { let counter = Counter.useContainer() return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> <div> <div> <div> <div>   </div> </div> </div> </div> </div> ) } 

के बाद:

 function ExpensiveComponent() { return ( <div> <div> <div> <div>   </div> </div> </div> </div> ) } function CounterDisplay() { let counter = Counter.useContainer() return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> <ExpensiveComponent /> </div> ) } 

2) उपयोगमेमो () हुक के साथ भारी संचालन का अनुकूलन

करने के लिए:

 function CounterDisplay(props) { let counter = Counter.useContainer() //    ,   `counter` —   let expensiveValue = expensiveComputation(props.input) return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } 

के बाद:

 function CounterDisplay(props) { let counter = Counter.useContainer() //    ,     let expensiveValue = useMemo(() => { return expensiveComputation(props.input) }, [props.input]) return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } 

3) React.memo () और useCallback () का उपयोग करके पुन: रेंडरर्स की संख्या कम करें

करने के लिए:

 function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } let Counter = createContainer(useCounter) function CounterDisplay(props) { let counter = Counter.useContainer() return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } 

के बाद:

 function useCounter() { let [count, setCount] = useState(0) let decrement = useCallback(() => setCount(count - 1), [count]) let increment = useCallback(() => setCount(count + 1), [count]) return { count, decrement, increment } } let Counter = createContainer(useCounter) let CounterDisplayInner = React.memo(props => { return ( <div> <button onClick={props.decrement}>-</button> <p>You clicked {props.count} times</p> <button onClick={props.increment}>+</button> </div> ) }) function CounterDisplay(props) { let counter = Counter.useContainer() return <CounterDisplayInner {...counter} /> } 

unstated साथ प्रवास

मैं जानबूझकर इस लाइब्रेरी को एक अलग पैकेज के रूप में प्रकाशित करता हूं क्योंकि संपूर्ण एपीआई पूरी तरह से नया है। इसलिए, आप दोनों पैकेज समानांतर में स्थापित कर सकते हैं और धीरे-धीरे माइग्रेट कर सकते हैं।

संक्रमण के अपने इंप्रेशन को unstated-next साझा करें, क्योंकि अगले कुछ महीनों में मेरी योजना इस जानकारी के आधार पर दो काम करने की है:

• सुनिश्चित करें कि unstated-next unstated उपयोगकर्ताओं की सभी आवश्यकताओं को पूरा करता है।
• सुनिश्चित करें कि unstated लिए unstated-next लिए पलायन की एक स्पष्ट और संक्षिप्त प्रक्रिया है।

शायद मैं डेवलपर्स के लिए जीवन को आसान बनाने के लिए पुरानी या नई लाइब्रेरी में कुछ एपीआई जोड़ूंगा। unstated-next , मैं वादा करता हूं कि जोड़े गए एपीआई यथासंभव न्यूनतम होंगे, और मैं पुस्तकालय को छोटा रखने की पूरी कोशिश करूंगा।

भविष्य में, मैं शायद एक नए प्रमुख संस्करण के रूप में unstated-next कोड को वापस unstated-next दूंगा। unstated-next अभी भी उपलब्ध होगा ताकि आप समानांतर में उसी परियोजना में unstated@2 और unstated-next का उपयोग कर सकें। फिर, जब आप माइग्रेशन समाप्त करते हैं, तो आप unstated@3 पर unstated@3 अपग्रेड कर सकते हैं और unstated-next (बेशक, सभी इंपोर्ट को अपडेट करते हुए ... काफी सर्च और रिप्लेस होना चाहिए) को डिलीट कर सकते हैं।

एपीआई में नाटकीय बदलाव के बावजूद, मुझे आशा है कि मैं आपको सबसे आसान प्रवास प्रदान कर सकता हूं। मुझे किसी भी टिप्पणी पर खुशी होगी जो बेहतर हो सकती है।

संदर्भ

• npm: अस्थिर-अगला
• github: अस्थिर-अगला