हुक पर झुका हुआ: रिएक्ट का उपयोग कैसे करेंरेड्यूसर ()

अनस्प्लैश पर पास्कल वैन डी वेंडेल द्वारा फोटो

इसलिए रिएक्ट सम्मेलन अभी हुआ और हमेशा की तरह कुछ नया हुआ। हुक हुआ! प्रतिक्रिया टीम ने सस्पेंस, आलसी लोडिंग, समवर्ती प्रतिपादन और हुक: डी के बारे में बात की।

अब मैं अपने पसंदीदा हुक उपयोगरेडर के बारे में बात करूँगा और आप इसका उपयोग कैसे करेंगे।

मेरे PokemonInfo घटक में, मेरे पास है:

const [{count, loading}}, प्रेषण] = useReducer (reducer, initialState);

जो इसके बराबर है:

const [राज्य, प्रेषण] = useReducer (reducer, initialState);
const {गिनती, लोडिंग} = राज्य;

तो क्या है const [राज्य, प्रेषण] = उपयोगकर्ता (param1, param2) सरणी के विनाश के बारे में पहले बात करते हैं जो नीचे हो रहा है।

const [राज्य, प्रेषण] = useReducer (initialState);

यहाँ सरणी विनाशकारी का एक उदाहरण है:

let myHeroes = ['Ant man', 'Batman']; // डीसी और मार्वल को मिलाकर: डी
let [marvelHero, dcHero] = myHeroes; // विनाशकारी सरणी
/ **
* myHeroes [0] == marvelHero => 'एंट मैन' है
* myHeroes [1] == dcHero => 'बैटमैन' है
* /

इसलिए विधि का उपयोग करने वाले के पास अपनी सरणी स्थिति और प्रेषण में दो आइटम हैं। इसके अलावा उपयोगरेडर दो मापदंडों में लेता है: एक रिड्यूसर है और दूसरा प्रारंभिक स्थिति है।

उपयोगरेडर परम रेड्यूसर में, मैं पास करता हूं:

यह क्या करता है यह दो तर्कों में है। एक reducer की वर्तमान स्थिति है और दूसरा कार्रवाई है। Action.type यह तय करता है कि यह कैसे reducer को अपडेट करेगा और हमें एक नया राज्य लौटाएगा।

तो अगर कार्रवाई। टाइप === वेतन वृद्धि

मामला 'वृद्धि': {
  वापसी {... राज्य, गणना: राज्य .ाउंट + 1, लोडिंग: गलत};
}

... यह राज्य को लौटा देगा, जिसकी संख्या +1 तक अपडेट की जाएगी और झूठी पर सेट की जाएगी। यह भी कहा जाता है कि राज्य कहां है। राज्य + 1 यहां वास्तव में पिछला राज्य है।

उपयोग मेंरेडर परम प्रारंभिक आरंभ में मैं पास:

const initialState = {
  लोड हो रहा है: गलत,
  गिनती: ०
};

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

तो मैं एक सरणी को नष्ट कर देता हूं, और सरणी के अंदर, मैं नीचे की तरह सरणी के पहले सूचकांक पर एक वस्तु को नष्ट कर देता हूं।

const [{count, loading}}, प्रेषण] = useReducer (reducer, initialState);

इसके अलावा, मेरे पास देरी नामक एक विधि है

// समय तर्क में 1500ms के बाद वापसी सही है।
const देरी = (समय = 1500) => {
  नया वादा लौटाएँ (संकल्प => {
      सेटटाइमआउट () => {
         हल (सही);
      }, समय);
   });
};

अब मेरे रेंडर विधि में जब मैं + बटन पर क्लिक करता हूँ

<बटन प्रकार = "बटन" onClick = {onHandleIncrement}> + 

onHandleIncrement फ़ंक्शन निष्पादित किया जाता है, जो निम्न कार्य करता है:

const onHandleIncrement = async () => {
   प्रेषण ({प्रकार: 'लोडिंग'});
   प्रतीक्षा में देरी (500);
   प्रेषण ({प्रकार: 'वेतन वृद्धि'));
};

यह शुरू में लोडिंग को सही बनाता है, 500ms की देरी जोड़ता है और फिर काउंटर को बढ़ाता है। अब मुझे पता है कि यह एक वास्तविक दुनिया का उदाहरण नहीं है, लेकिन यह इस बिंदु की व्याख्या करता है कि कैसे एक reducer काम करता है।

आखिरी चीज:

गणना {लोडिंग? 'लोडिंग ..': गिनती}

यदि लोडिंग सही है, तो मैं काउंट लोडिंग दिखाता हूं .. अन्यथा मैं काउंट {वैल्यू} दिखाता हूं।

यह यूआई में कैसा दिखता है:

उपयोगरेडर हुक का उपयोग करके उदाहरण की गणना करें

मैंने दान अब्रामोव के कोड की नकल करने की कोशिश की, जो उन्होंने रिएक्ट कॉन्फ्रेंस 2018 में दिखाया था। यहां कोड रिपॉजिटरी का लिंक दिया गया है। का आनंद लें। :)

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