243

बंद हो गया । यह सवाल राय आधारित है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न को अपडेट करें ताकि इस पोस्ट को संपादित करके तथ्यों और उद्धरणों के साथ उत्तर दिया जा सके ।

पिछले साल बंद हुआ ।

इस प्रश्न को सुधारें

मैंने अभी हाल ही में Redux की खोज की है । यह सब अच्छा लग रहा है। क्या फ्लक्स पर Redux का उपयोग करने के लिए कोई डाउनसाइड, गोच या समझौता है? धन्यवाद

— इवान वांग
स्रोत

411

Redux लेखक यहाँ!

मैं यह कहना चाहूंगा कि आप इसका उपयोग करके निम्नलिखित समझौता करने जा रहे हैं:

आपको म्यूटेशन से बचने के लिए सीखने की आवश्यकता होगी। फ्लक्स उत्परिवर्तित डेटा के बारे में अनधिकृत है, लेकिन Redux म्यूटेशन को पसंद नहीं करता है और Redux के पूरक कई पैकेज मान लेते हैं कि आप कभी भी राज्य को म्यूट नहीं करते हैं। आप की तरह देव-केवल पैकेज के साथ इस लागू कर सकते हैं redux-अपरिवर्तनीय-राज्य अपरिवर्तनीय , उपयोग Immutable.js , या विश्वास अपने आप को और अपनी टीम के गैर mutative कोड लिखने के लिए, लेकिन यह के कुछ आप को यह जरूरतों के बारे में पता करने की आवश्यकता है, और अपनी टीम द्वारा स्वीकार किया गया एक सचेत निर्णय हो।
आप ध्यान से अपने पैकेज लेने जा रहे हैं। हालांकि फ्लक्स स्पष्ट रूप से "पास" समस्याओं को हल करने की कोशिश नहीं करता है, जैसे कि पूर्ववत करें / फिर से करें , दृढ़ता , या प्रपत्र , Redux में मिडिलवेयर और स्टोर एन्हांसर्स जैसे विस्तार बिंदु हैं, और इसने एक युवा लेकिन समृद्ध पारिस्थितिकी तंत्र को जन्म दिया है । इसका मतलब है कि अधिकांश पैकेज नए विचार हैं और अभी तक उपयोग के महत्वपूर्ण द्रव्यमान को प्राप्त नहीं किया है। आप कुछ इस पर निर्भर हो सकते हैं कि कुछ महीने बाद यह स्पष्ट रूप से एक बुरा विचार होगा, लेकिन यह अभी तक बताना मुश्किल है।
आपके पास अभी तक एक अच्छा प्रवाह एकीकरण नहीं होगा। फ्लक्स वर्तमान में आपको बहुत प्रभावशाली स्थिर प्रकार की जांच करने देता है जो Redux अभी तक समर्थन नहीं करता है । हम वहाँ पहुँचेंगे, लेकिन इसमें कुछ समय लगेगा।

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

Redux का उपयोग करने के बारे में मेरे उत्तर को भी देखें ।

— दान अब्रामोव
स्रोत

1

बहुत बढ़िया जवाब। क्या इस बात की सरल व्याख्या है कि उत्परिवर्तन को रिडक्स और पूरक पैकेजों में क्यों टाला जाता है?

— रामबोसा

7

संक्षेप में, म्यूटेशन यह जांचना कठिन बनाते हैं कि राज्य के कौन से हिस्से केवल यूआई के बदले हुए हिस्सों को कुशलता से बदल सकते हैं। वे डिबगिंग को कठिन बनाते हैं, और लाइब्रेरी जैसे github.com/omnidan/redux-undo असंभव। अंत में समय यात्रा github.com/gaearon/redux-devtools में काम नहीं करेगा यदि राज्य उत्परिवर्तित था।

— दान अब्रामोव

@DanAbramov Redux में कुशल रेडर होने की अपरिहार्यता कैसे मदद करता है? उदाहरण के लिए प्रतिक्रिया-रिडक्स shallowEqualचेक का उपयोग यह निर्धारित करने के लिए किया जाता है कि क्या राज्य बदल गया है। लेकिन इसे डीपक्वाल या JSON.stringify और तुलना के साथ बदला जा सकता है। आखिरकार यह कुछ हद तक कम प्रदर्शन है - लेकिन यह डोम से निपटने के बिना शुद्ध संगणना है - इतना तेज। और किसी भी मामले में रेंडरिंग एक ही है

— amakhrov

@amakhrov deepEqual या JSON.stringify काफी धीमे हैं। वे वास्तविक ऐप्स के लिए "पर्याप्त तेज़" नहीं हैं, खासकर यदि आप हर दृश्य के लिए डेटा की तुलना करते हैं।

— दान अब्रामोव

ठीक है मैंने समझ लिया। लगता है कि लालच को अधिक कुशल बनाने के बजाय, अपरिवर्तनीयता गंदे चेक को अधिक कुशल बनाती है।

— अमाखरोव

37

Redux और Flux दोनों को कई सामान्य पैटर्न को कवर करने के लिए काफी मात्रा में बॉयलरप्लेट कोड की आवश्यकता होती है, विशेष रूप से जो अतुल्यकालिक डेटा लाने में शामिल होते हैं। Redux प्रलेखन में पहले से ही बॉयलरप्लेट में कमी के लिए कुछ उदाहरण हैं: http://redux.js.org/docs/recipes/ReducingBoilerplate.html । ऑल्ट या फ्लक्सएक्सोर जैसी फ्लक्स लाइब्रेरी से आपको सब कुछ मिल सकता है, लेकिन Redux सुविधाओं पर स्वतंत्रता पसंद करता है। यह कुछ डेवलपर्स के लिए नकारात्मक पक्ष हो सकता है क्योंकि Redux आपके राज्य के बारे में कुछ धारणाएं बनाता है जो अनजाने में अवहेलना हो सकती हैं।

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

डिस्क्लेमर: मैंने फ्लमॉक्स (एक लोकप्रिय फ्लक्स कार्यान्वयन) से रेडक्स के लिए माइग्रेट किया और अपसाइड्स ने किसी भी डाउनसाइड को बहुत आगे बढ़ाया। मैं अपने कोड में बहुत कम जादू पसंद करता हूं। कम जादू थोड़ा अधिक बॉयलरप्लेट की कीमत पर आता है, लेकिन यह भुगतान करने के लिए बहुत कम कीमत है।

— velveteer
स्रोत

16

फ्लक्स और रेडक्स । । ।

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

Redux एक अपरिवर्तनीय अवधारणा का समर्थन कर रहा है ।

क्यों अपरिवर्तनीयता?

इसके कुछ कारण हैं:
1. सामंजस्य - स्टोर की स्थिति को हमेशा एक reducer द्वारा बदला जा रहा है, इसलिए यह आसान ट्रैकिंग है जो बदलते हैं।
2। प्रदर्शन - क्योंकि यह अपरिवर्तनीय है, Redux को केवल यह जांचने की आवश्यकता है कि क्या पिछला राज्य! == वर्तमान स्थिति है और यदि प्रस्तुत करना है। निर्धारित रेंडरिंग के लिए हर बार राज्य को लूप करने की आवश्यकता नहीं है।
3. डिबगिंग - टाइम ट्रैवल डीबगिंग और हॉट रीलोडिंग जैसी नई भयानक अवधारणाएं ।

अद्यतन: यदि वह पर्याप्त राजी नहीं था, तो ली बायरन को अपरिवर्तनीय उपयोगकर्ता इंटरफ़ेस के बारे में उत्कृष्ट बात करें ।

इस विचार को बनाए रखने के लिए Redux को कोडबेस / लाइब्रेरीज़ के माध्यम से एक डेवलपर (डिसिप्लिन) अनुशासन की आवश्यकता होती है। आपको यह सुनिश्चित करने की आवश्यकता होगी कि आप पुस्तकालयों को चुनें और एक गैर-परिवर्तनशील तरीके से कोड लिखें।

यदि आप फ्लक्स अवधारणाओं के विभिन्न कार्यान्वयन के बारे में अधिक जानना चाहते हैं (और आपकी आवश्यकताओं के लिए सबसे अच्छा क्या काम करता है), तो इस उपयोगी तुलना को देखें।

उसके बाद, मुझे यह स्वीकार करना चाहिए कि Redux वह जगह है जहाँ JS भविष्य का विकास हो रहा है (इन पंक्तियों को लिखने के लिए)।

— जूनियर एलरोम
स्रोत

15

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

— CNP
स्रोत

4

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

साथ ही Redux को अन्य लोकप्रिय फ्रेमवर्क जैसे Angular का उपयोग करके अधिक लचीलापन मिला है । वैसे भी, आइए देखें कि कैसे Redux खुद को एक रूपरेखा के रूप में पेश करता है।

Redux के तीन सिद्धांत हैं जो Redux को बहुत अच्छी तरह से पेश कर सकते हैं और वे Redux और फ़्लक्स के बीच भी मुख्य अंतर हैं।

सत्य का एकल स्रोत

आपके संपूर्ण एप्लिकेशन की स्थिति को एक एकल स्टोर के भीतर ऑब्जेक्ट ट्री में संग्रहीत किया जाता है।

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

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

राज्य केवल पढ़ने के लिए है

राज्य को बदलने का एकमात्र तरीका एक कार्रवाई का उत्सर्जन करना है, जो वस्तु का वर्णन करता है।

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

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

शुद्ध कार्यों के साथ परिवर्तन किया जाता है

यह निर्दिष्ट करने के लिए कि राज्य का पेड़ कैसे क्रियाओं द्वारा रूपांतरित होता है, आप शुद्ध रीड्यूसर लिखते हैं।

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

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

अधिक जानकारी के लिए यहां जाएं

— एलिरेज़ा
स्रोत

0

Redux को अपरिवर्तनीयता के संबंध में अनुशासन की आवश्यकता होती है। जो कुछ मैं सुझा सकता हूं वह आपको किसी भी आकस्मिक राज्य उत्परिवर्तन के बारे में बताने के लिए एनजी-फ्रीज है।

— लियोनार्डो
स्रोत

-1

जहाँ तक मुझे पता है, Redux फ्लक्स से प्रेरित है। फ्लक्स MVC (मॉडल व्यू कंट्रोलर) जैसा एक आर्किटेक्चर है। एमवीसी का उपयोग करते समय स्केलेबिलिटी की समस्या के कारण फेसबुक फ्लक्स को पेश करता है। इसलिए प्रवाह एक कार्यान्वयन नहीं है, यह सिर्फ एक अवधारणा है। वास्तव में Redux फ्लक्स का कार्यान्वयन है।

— उज़मा ज़ैद
स्रोत

फ्लक्स [बंद] के बजाय Redux का उपयोग करने के निम्न पहलू क्या हो सकते हैं

फ्लक्स और रेडक्स । । ।

क्यों अपरिवर्तनीयता?