Redux के राज्य कार्यों को Reducers क्यों कहा जाता है?


82

यह एक हिस्सा है आधिकारिक Redux प्रलेखन :

इसे एक reducer कहा जाता है क्योंकि यह उस प्रकार का फ़ंक्शन है जिसे आप पास करेंगे Array.prototype.reduce(reducer, ?initialValue)

यह मेरे लिए बहुत मायने नहीं रखता है। क्या कोई मुझे समझा सकता है कि उन्हें वास्तव में रेड्यूसर क्यों कहा जाता है? तथ्य यह है कि वे एक डिफ़ॉल्ट मान लौटाते हैं (या उनके पास एक डिफ़ॉल्ट तर्क मान है) उन्हें आईएमएचओ को पुनर्परिभाषित नहीं करता है।


6
वे वास्तव में पुनर्परिभाषित होते हैं क्योंकि वे उस फ़ंक्शन की तरह व्यवहार करते हैं जिसे आप पास करते हैं reduce, जिसमें डिफ़ॉल्ट मान और दूसरे मूल्य तक पहुंच होती है, और आपको अपने संभावित रूप से परिवर्तित डिफ़ॉल्ट मान को वापस देता है। state -> action -> state
अज़ीम

2
किसी अन्य नाम से गुलाब ... शायद विपणन; नक्शा / कमी अब एक
चर्चा है

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

जवाबों:


71

तथ्य यह है कि वे एक डिफ़ॉल्ट मान लौटाते हैं (या उनके पास एक डिफ़ॉल्ट तर्क मान है) उन्हें आईएमएचओ को पुनर्परिभाषित नहीं करता है।

Reducers केवल डिफ़ॉल्ट मान नहीं लौटाते हैं। वे हमेशा राज्य के संचय (सभी पिछले और वर्तमान कार्यों के आधार पर) वापस करते हैं।

इसलिए, वे राज्य के एक reducer के रूप में कार्य करते हैं । हर बार एक redux reducer कहा जाता है, राज्य कार्रवाई के साथ पारित किया जाता है (state, action)। इस राज्य को तब कार्रवाई के आधार पर कम (या संचित) किया जाता है, और फिर अगले राज्य को वापस कर दिया जाता है। यह क्लासिक foldया reduceफ़ंक्शन का एक चक्र है ।

जैसा @azium ने समन किया state -> action -> state


7
इस तर्क से हुम को उन्हें रिड्यूसर की बजाय समृद्ध नहीं कहा जाना चाहिए? कोई डेटा कभी भी इसे कम नहीं किया जा रहा है: / lol
Jamie Hutber

16
@ जैमीहटबर मुझे लगता है कि आप इस संदर्भ में reducer का अर्थ थोड़ा याद करते हैं। reducer आइटमों की एक स्ट्रीम (या संग्रह) ले रहा है और उन्हें एक एकल आइटम में मिला रहा है। इस मामले में, सभी क्रियाएं (समय के माध्यम से) वस्तुओं का संग्रह हैं, और राज्य एकल आइटम है। सही बात?
डेविन ट्राइटन

7
अब मैं देख रहा हूँ। तो इसकी मूल रूप से सिर्फ उन्हें छुपा। फिर इसे विलय क्यों नहीं कहा जाता: पी
थैंक्स

20
धन्यवाद, मैं केवल एक ही नहीं सोचता हूं कि नाम reducer इस पोस्ट पर कम से कम 2,000 विचारों से थोड़ा हटकर है जब मैं यह लिखता हूं। तथ्य यह है कि किसी को भी खुदाई करने के लिए प्रयास करने के लिए तैयार है क्यों इसे reducer कहा जाता है इसका मतलब यह नहीं है कि यह वास्तव में एक सा है? यदि यह एक reducer कहलाता है क्योंकि यह फ़ंक्शन का प्रकार है जिसे आप Array.prototype.reduce में पास करेंगे, तो यह ऐसा है जैसे चलो नारंगी को एक जूसर कहते हैं क्योंकि हम नारंगी को ऑब्जेक्ट.प्रोटोटाइप.ज्यूसर में पास करते हैं, या हमें इसे फल नहीं कहना चाहिए?
यनी

2
मैं मानता हूं, यह बिल्कुल सहज नाम नहीं है। तार्किक रूप से, reducer कहा जाने के लिए यह कुछ कम करना चाहिए। यदि इसने एक राज्य के साथ-साथ पूरे राज्य में बदलाव किए और उन्हें एक ही बार में एक ही राज्य में मिला दिया, तो यह एक सहज नाम होगा।
पीटर इवान डील

20

यदि आप अपने ऐप में कार्यों की श्रृंखला को एक सूची की तरह मानते हैं, या शायद एक स्ट्रीम की तरह, तो यह अधिक समझ में आता है।

इसका उदाहरण लें:

['apple', 'banana', 'cherry'].reduce((acc, item) => acc + item.length, 0)

पहला तर्क फॉर्म का एक फ़ंक्शन है (Int, String) => Int। एक प्रारंभिक मूल्य के साथ, आप पास reduceकरते हैं जिसे "रेड्यूसर फ़ंक्शन" कहा जा सकता है, और आपको आइटमों की श्रृंखला के प्रसंस्करण का परिणाम मिलता है। तो आप कह सकते हैं, रिड्यूसर फ़ंक्शन वर्णन करता है कि परिणाम बदलने के लिए प्रत्येक क्रमिक व्यक्तिगत आइटम के साथ क्या किया जाता है। दूसरे शब्दों में, reducer फ़ंक्शन पूर्व आउटपुट और अगला मान लेता है, और यह अगले आउटपुट की गणना करता है।

यह एक Redux reducer क्या करता है के अनुरूप है: यह पिछली स्थिति और वर्तमान कार्रवाई लेता है, और यह अगले राज्य की गणना करता है।

वास्तविक कार्यात्मक प्रोग्रामिंग शैली में, आप तर्क और परिणाम पर लागू अर्थ को वैचारिक रूप से मिटा सकते हैं, और केवल इनपुट और आउटपुट के "आकार" पर ध्यान केंद्रित कर सकते हैं।

व्यवहार में, Redux reducers आम तौर पर ऑर्थोगोनल होते हैं, इस अर्थ में कि किसी दिए गए कार्य के लिए, वे सभी समान गुणों में परिवर्तन नहीं करते हैं, जिससे उनकी ज़िम्मेदारियों को विभाजित करना और आउटपुट को एकत्र करना आसान हो जाता है combineReducers


हां, आप सही हैं, यह अधिक समझ में आता है जब मैं एक धारा के बारे में अधिक कार्यों के बारे में सोच रहा हूं। शांत, क्षमा करें कि!
एंटोन सवचेंको

यह वह था जिसे मैंने शुरू में समझा था, लेकिन यह प्रतीत नहीं होता है कि स्टोर स्टोर कार्यान्वयन में से किसी एक को मैंने इस प्रकार लागू किया है ...
बोरिस 21

16

जैसा कि पहले ही उल्लेख किया गया है कि नाम कार्यात्मक प्रोग्रामिंग में एक reducer की अवधारणा से संबंधित है। तुम भी reducer की मरियम-वेबस्टर शब्दकोश परिभाषा सहायक हो सकता है:

1 क। एक साथ आकर्षित या अभिसरण करने का कारण: समेकित करें (सभी प्रश्नों को एक में घटाएं)

Reducer अनुप्रयोग स्थिति का प्रतिनिधित्व करने वाली एकल ऑब्जेक्ट में क्रियाओं को समेकित करता है।


8

कारण है कि एक redux कम करने के लिए एक कहा जाता है reducerक्योंकि आप "को कम सकता है" एक है collection of actionsऔर एक initial stateहै जिस पर (दुकान के) इन कार्यों जिसके परिणामस्वरूप प्राप्त करने के लिए प्रदर्शन करने के लिए final state

कैसे? इसका उत्तर देने के लिए, मुझे फिर से एक reducer परिभाषित करने दें:

को कम () विधि एक लागू होता है function (reducer)एक के खिलाफ accumulatorऔर सरणी के प्रत्येक मूल्य (बाएं-से-दाएं) एक भी मान तक कम करने के लिए।

और एक redux reducer क्या करता है?

Reducer एक शुद्ध functionहै जो वर्तमान स्थिति और एक कार्रवाई करता है, और अगले राज्य को वापस करता है। ध्यान दें कि इस स्थिति accumulatedको बदलने के लिए संग्रह पर प्रत्येक कार्रवाई के रूप में राज्य लागू होता है।

तो एक दिया collection of actions, reducer संग्रह के प्रत्येक मूल्य (बाएं से दाएं) पर लागू किया जाता है। पहली बार, यह लौटा initial value। अब रेड्यूसर को इस प्रारंभिक स्थिति पर फिर से लागू किया जाता है और अगले राज्य को वापस करने की पहली कार्रवाई होती है। और अगले संग्रह आइटम (कार्रवाई) पर हर बार लागू किया जाता है current stateपाने के लिए next stateजब तक यह सरणी के अंत तक पहुँचता है। और फिर, आप प्राप्त करते हैं the final state। कितना मजेदार था वो!


5

लेखक कम फ़ंक्शन के संचयकर्ता के रूप में सोचता है। उदाहरण के लिए:

Final State = [Action1, Action2, ..., ActionN].reduce(reducer, Initial State);

कम कार्य कार्यात्मक प्रोग्रामिंग से आ रहा है, एफपी से "रिड्यूसर" नाम भी आ रहा है।

मुझे यहाँ उस नाम का उपयोग करना पसंद नहीं है। क्योंकि मैं दुनिया को कार्यों के बाद एक ही मूल्य के परिणाम के रूप में नहीं देखता हूं। यहां की स्थिति एक वस्तु है। उदाहरण के लिए:

['eat', 'sleep'] === [addTodo('eat'), addTodo('sleep')].reduce(reducer, []);

यह Reducer बिल्कुल भी कम नहीं करता है। और मुझे नहीं लगता कि यह कुछ भी कम करता है या नहीं। इसे ट्रांसड्यूसर के रूप में नाम देना अधिक समझ में आएगा।


5

हम जानते हैं कि Reducers कहां से आ रहे हैं (कार्यात्मक प्रोग्रामिंग), और उन्हें काम को कम करने के लिए क्यों माना जा सकता है (एन इनपुट आइटम को एक एकल वापसी मूल्य पर कम करें - जो कि सामान्य कार्यों को दबाने के लिए बस है)। हालाँकि: नाम सिर्फ एक नाम है, जैसे गुलाब एक गुलाब का नाम है। । ज्यादा मत सोचो Redux प्रोगामर्स आईटी लोग हैं, वे उनके संदर्भ में बंद हैं और वहां यह समझ में आता है। हम में से बाकी को आविष्कारक के अधिकार को एक नीले कुत्ते को पीली बिल्ली कहना स्वीकार करना होगा ;-)


2

कैसे के बारे में हम इसे अब से Deducer कहते हैं। यह पिछली स्थिति और आने वाली कार्रवाई के आधार पर नए राज्य को घटाता है।


1

उन्हें कम करने के साधन के रूप में कम नहीं कहा जाना चाहिए, ये कार्य सबसे अधिक बार बनाते हैं। और फिर उसे वापस कर दें


1

मैं यह नहीं देख सकता कि एक Redux reducer सीधे आपके द्वारा उपयोग किए जाने वाले फ़ंक्शन पर मैप किया गया है reduce, इसलिए यहां कुछ उदाहरण हैं जो यह देखते हैं कि आप कैसे मेल खाते हैं।

पहले MDN Array.reduce प्रलेखन से एक मानक रिड्यूसर (जिसे एमडीएन में 'संचायक' कहा जाता है) कार्य करता है और फिर डैन अब्रामोव के सरलीकृत उदाहरण Counter.jsमें उनके 'आपको Redux' ब्लॉग पोस्ट की आवश्यकता नहीं हो सकती है

  • sum संचयकर्ता के लिए एक मूल्य जोड़ता है
  • reducer संचयकर्ता से / के लिए एक मान जोड़ता / घटाता है।

दोनों ही मामलों में यहाँ 'राज्य' केवल एक पूर्णांक है।

आप राज्य में कार्यों को 'संचित' कर रहे हैं। यह किसी भी जावास्क्रिप्ट ऑब्जेक्ट को संशोधित करने का अपरिवर्तनीय तरीका भी है।

const sum = function(acc, val) {
    return acc + val;
};

const reducer = function(state, action) {
    switch (action) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
};

console.log('sum', [1, -1, 1].reduce(sum, 0));

console.log('reduce', ['INCREMENT', 'DECREMENT', 'INCREMENT'].reduce(reducer, 0));

console.log('sum', [1, 1, 1].reduce(sum, 0));

console.log('reduce', ['INCREMENT', 'INCREMENT', 'INCREMENT'].reduce(reducer, 0));


0

अन्य उत्तर अच्छी तरह से समझाते हैं कि इसका नाम क्यों रखा गया है, लेकिन आइए अधिक चीजों के नामकरण की कोशिश करें ...

const origState = 0;
const actionOperators = {
    increment: (origState) => origState++,
    decrement: (origState) => origState--,
};
const anOperator = (aState, anAction) => actionOperators[anAction](aState);
const actions = ['increment', 'decrement', 'increment'];
const finalState = actions.reduce(anOperator, origState);

सबसे पहले, reduceबुलाया जा सकता है use anOperator with every action name and accumulated state, starting with origState। स्मालटाक में इसे कहा जाता है actions inject: origState into: anOperator। लेकिन वास्तव में आप ऑपरेटर में क्या इंजेक्ट करते हैं? मूल और कार्रवाई के नाम। इसलिए स्मालटाक विधि में भी नाम बहुत स्पष्ट नहीं हैं।

actionOperators[increment]एक Reducer है, लेकिन मैं इसे और एक्शनऑपरेटर कहूंगा क्योंकि यह प्रत्येक एक्शन के लिए लागू किया गया है। राज्य केवल एक तर्क है (और वापसी मूल्य के रूप में एक और एक)।

Reducer Google खोज परिणामों के शीर्ष पर रहने के लिए एक बेहतर शब्द है। यह भी Redux के समान है।


0

नीचे दिए गए इस कोड में आपको संचयकर्ता को क्रियाओं और currentValue के रूप में Redux संदर्भ में एक राज्य के रूप में सोचने की आवश्यकता है। इस उदाहरण से आपको पता चलेगा कि वे इसे एक reducer के रूप में क्यों नाम देते हैं।

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// Main operation is 1 + 2 + 3 + 4 = 10
// but think of it as a stack like this: 

// | 2 | | 3 | | 4 | 
// |_1_| |_3_| |_6_| | 10 | => the 10 is in result

console.log(array1.reduce(reducer));
// expected output: 10

कम () विधि एरे के प्रत्येक तत्व पर एक रिड्यूसर फ़ंक्शन (जो आप प्रदान करते हैं) निष्पादित करता है, जिसके परिणामस्वरूप एक आउटपुट आउटपुट होता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.