Redux: वास्तविक दुनिया के उदाहरण (सीआरयूडी, उन्नत पैटर्न, आदि सहित)

मुझे एक आधिकारिक सीआरयूडी उदाहरण रखना अच्छा लगेगा जो संभालता है:

• प्रमाणीकरण
• मानकीकरण
• आशावादी अपडेट
• स्थानीय संपादन
• इकाई संबंध
• पृष्ठ पर अंक लगाना

यदि आप इसके चारों ओर एक पाठ्यक्रम बनाना चाहते हैं, तो यह आश्चर्यजनक है। हालांकि मुझे लगता है कि यह महत्वपूर्ण है कि उदाहरण स्वयं इस रेपो में योगदान दिया गया है ताकि हम इसे बनाए रख सकें और इसे नवीनतम परिवर्तनों के साथ अद्यतित रख सकें। इसलिए यह मौजूदा उदाहरणों में हमारे द्वारा उपयोग की जाने वाली निर्माण प्रणाली और सम्मेलनों के अनुरूप होना चाहिए।

इसका कोई मतलब भी है क्या?

मुझे यह भी देखना अच्छा लगेगा कि लोग एपीआई से डेटा कहां ला रहे हैं।

@gaearon सामग्री/कोड खुला स्रोत होगा, इसलिए कोई समस्या नहीं है। हम पृष्ठ पर कहीं वापस एक लिंक मांगेंगे :) (संपादित करें - मौजूदा बिल्ड सिस्टम/सम्मेलनों का उपयोग करना हमारे लिए भी बेहतर है)

@sebastiandeutsch क्या आप इस पर थोड़ा विस्तार कर सकते हैं?

कुछ समय पहले मैंने प्रतिक्रिया + रेडक्स , मोनोग्राम और एक्क्रिप्टो का उपयोग करके पासवर्ड मैनेजर लिखने के साथ खेलना शुरू कर दिया था। पासवर्ड स्टोर करें और ECIES का उपयोग करके बिना एन्क्रिप्टेड फॉर्म में वायर पर भेजे बिना उन सभी को साझा करें। इसे वास्तव में पूरा करने के लिए कभी भी काफी कुछ नहीं मिला, लेकिन यह https://github.com/rackt/redux/issues/1353#issuecomment -178760036 में सभी वस्तुओं को बहुत अच्छी तरह से संतुष्ट कर सकता है। क्या यह दिलचस्प लगता है?

@vkarpov15

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

मुझे आशावादी अपडेट के साथ स्थानीय/ऑफ़लाइन संपादन में बहुत दिलचस्पी है, मेरे पास कुछ समय है लेकिन मुझे रेडक्स ऐप के साथ इतना अनुभव नहीं है, मुझे केवल एक जटिल देशी ऐप मिला है, लेकिन लगभग पूरी तरह से स्थानीय/ऑफ़लाइन।
हो सकता है कि हम एक रेपो लिख सकें और उस पर काम कर सकें और धीरे-धीरे चर्चा कर सकें?
इसके अलावा "मॉड्यूलर" ऐप्स के बारे में क्या?
बस कुछ विचारों को साझा करने के लिए, मैंने इस बारे में कुछ विचार लिखे हैं कि मुझे लगता है कि ऑफ़लाइन पहला ऐप कैसा होना चाहिए, अगर आपके पास इसमें खर्च करने का समय है तो इसे एक शॉट दें! :)

https://github.com/jsforum/jsforum/issues/7

सुनिश्चित नहीं है कि समस्या कितनी व्यापक है और इस पाठ्यक्रम के लिए डेवलपर्स का लक्ष्य स्तर क्या है, लेकिन मैं नेट पर कहीं और देखना चाहता हूं कि प्रतिक्रिया + रेडक्स में कार्यान्वित जटिल ऐप घटकों को कैसे आर्किटेक्ट किया जाए (जैसे मल्टी-स्टेप फॉर्म या विज़ार्ड के साथ राज्य कई रेड्यूसर द्वारा नियंत्रित) ताकि वे किसी अन्य ऐप में संपूर्ण रूप से पुन: प्रयोज्य हों।

@sompylasar कृपया रिएक्ट Redux रेपो में इस बारे में एक मुद्दा बनाने के लिए स्वतंत्र महसूस करें। मुझे वहां Redux-जागरूक घटक के पुन: उपयोग या अलग करने के तरीकों पर चर्चा करने में प्रसन्नता हो रही है।

यदि आप एक शुरुआती स्तर के क्रूड उदाहरण की तलाश में हैं तो वहां हमेशा टूडू-एमवीसी और "बेबेल + रेडक्स + रिएक्ट + वेबपैक के साथ शुरुआत करना" ट्यूटोरियल की सेना होती है। मुझे यकीन नहीं है कि अभी तक एक और के लिए बहुत अधिक मूल्य है, मैं हर हफ्ते इस विषय पर कुछ नए ब्लॉग पोस्ट पढ़ता हूं (लेकिन शायद आप एक ऐप बना सकते हैं जो स्वचालित रूप से इन ट्यूटोरियल्स को उत्पन्न करता है? :p)। मेरा तर्क है कि एक अधिक मध्यवर्ती स्तर का ट्यूटोरियल अधिक सार्थक होगा, और क्रिप्टो के बारे में IMO सीखना एक आकर्षक पक्ष लाभ हो सकता है।

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

क्या यह एक कस्टम या मौजूदा एपीआई का उपभोग करेगा? या संयोजन?

यह कठिन प्रश्न है। मुझे नहीं पता। जीथब एपीआई एक अच्छा विचार हो सकता है क्योंकि यह लिखने योग्य है और अवधारणाएं सभी के लिए परिचित हैं। मुझे पता है @ryanflorence ने कुछ इसी तरह काम किया।

निश्चित रूप से इसके साथ मध्यवर्ती-उन्नत देवों को लक्षित करना; शुरुआती टट्स संतृप्त हो गए हैं और शायद ही कभी (वास्तविक दुनिया) कठिन विषयों को कवर करते हैं जो ऊपर सूचीबद्ध हैं।

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

@EricSimons मुझे मध्यम क्लोन के बारे में और जानना अच्छा लगेगा।

@cshenoy निश्चित रूप से। हम एक फुलस्टैक JS कोर्स बना रहे हैं जिसमें रिएक्ट/रेडक्स फ्रंटएंड के रूप में और नोड बैकएंड के रूप में होगा। हमारे पास बैकएंड एपीआई उन लोगों के लिए स्वतंत्र रूप से होस्ट किया जाएगा जो इसे स्थानीय रूप से नहीं चलाना चाहते हैं, इसलिए यह ऊपर दिए गए कुछ अधिक जटिल विषयों को पढ़ाने के लिए उपयुक्त हो सकता है। मध्यम क्लोन के लिए निर्धारित फीचर में निम्नलिखित शामिल हैं:

• प्रमाणीकरण (ईमेल/पास और oAuth, JWT)
• ब्लॉग पोस्ट और ब्लॉग पोस्ट पर टिप्पणियों के लिए CRUD
• निम्नलिखित उपयोगकर्ता
• सभी ब्लॉगों का वैश्विक फ़ीड और आपके द्वारा अनुसरण किए जाने वाले उपयोगकर्ताओं के ब्लॉग का फ़ीड
• टैगिंग सिस्टम
• उपयोगकर्ता प्रोफ़ाइल / संपादन प्रोफ़ाइल जानकारी

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

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

मुझे लगता है कि यह बहुत अच्छा होगा। मैंने इसके साथ थोड़ा संघर्ष किया है, विशेष रूप से इसका निर्माण भाग। उदाहरण के लिए मान लें कि आपके पास एक ArticlePage घटक है जो इस तरह के नए लेख बनाता है:

// shortened version

import { addArticle } from '../actions'

function doAddArticle(props, handleAdded, values, dispatch) {
  props.addArticle(values)
  .then(handleAdded)
}

class AddArticlePage extends Component {
  handleAdded = () => {
    this.props.pushState(null, '/articles/')
  };

  render() {
    return (
      <div>
        <ArticleForm submit={(values, dispatch) => doAddArticle(this.props, this.handleAdded, values, dispatch)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps, {
  pushState,
  addArticle
})(AddArticlePage)

1. मुझे यह भी यकीन नहीं है कि पुनर्निर्देशन करने के हल किए गए वादे को बंद करने के लिए यह "सही" बात है।
2. क्या होगा अगर मैं नए बनाए गए लेख से आईडी प्राप्त करना चाहता हूं और इंडेक्स पेज पर रीडायरेक्ट करने के बजाय, मैं /articles/{id}/ पेज पर रीडायरेक्ट करना चाहता हूं?
3. क्या होगा यदि मेरा घटक async क्रिया का परिणाम चाहता है? मेरे लिए, यह एक छवि अपलोड फॉर्म फ़ील्ड के साथ मेरे आर्टिकलफॉर्म घटक के भीतर आया: मैं एक क्रिया "addImage" भेजता हूं और जब छवि लोड हो जाती है तो मैं चाहता हूं 1) यूआरएल के आधार पर अपलोड की गई छवि का पूर्वावलोकन दिखाएं और 2) चाहते हैं फॉर्म को यूआरएल असाइन करें। लेकिन, मुझे यह पता लगाना कठिन लगा कि Redux में ऐसा करने का सबसे अच्छा तरीका क्या है। मुझे मिली समस्या यह थी कि आपको फॉर्म घटक में नए जोड़े गए राज्य/छवि को प्रोप में मैप करने में सक्षम होना चाहिए, लेकिन 1) आप नई जोड़ी गई छवि कैसे प्राप्त करते हैं और 2) क्या होगा यदि एक साथ 2 छवियां अपलोड हो रही हैं, कैसे क्या आपको सही घटक के लिए सही छवि URL मिलता है?

दी, मैं केवल कुछ महीनों के लिए Redux-ing कर रहा हूं, इसलिए वे मूर्खतापूर्ण मुद्दे हो सकते हैं, लेकिन एक शुरुआत के रूप में उन्होंने निश्चित रूप से मुझे फंसा दिया और मुझे अभी भी नहीं लगता कि मेरे समाधान "सही तरीके" हैं।

@jonathaningram क्या आपने redux-thunk को बिल्कुल देखा है? आप जो ऊपर कर रहे हैं उसके विकल्प के रूप में, यह आपको अपनी कार्रवाई के भीतर से प्रेषण करने देगा

@babsonmatt हाँ मैं इसे पहले से ही उपयोग कर रहा हूँ। मैंने ऐप को वास्तविक दुनिया के उदाहरण पर आधारित किया है जो इसका उपयोग करता है। हो सकता है कि मैं इसे पूरी क्षमताओं के लिए उपयोग नहीं कर रहा हूं।

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

@sompylasar धन्यवाद। हां, मैं इस मुद्दे को दरकिनार नहीं करना चाहता, लेकिन सिर्फ अपने "वास्तविक दुनिया" के अनुभवों को एक रेडक्स शुरुआती के रूप में साझा करना चाहता था, जो इस मुद्दे से उत्पन्न होने वाले नए उदाहरणों की उम्मीद करता है।

@EricSimons मुझे मदद करने में दिलचस्पी है। मैं वर्तमान में परमाणु-जेएस का उपयोग कर एक सीआरयूडी ऐप बनाए रख रहा हूं और मुझे लगता है कि इसके बहुत से विचार रेडक्स में अच्छी तरह से अनुवाद करेंगे। अगर आप मंथन करना चाहते हैं तो मुझे बताएं।

मैंने हाल ही में सीआरयूडी (ओवर आरईएसटी) राज्य प्रबंधन के लिए एक परियोजना शुरू की है। Marionette/Backbone से आ रहा है जब रिएक्ट/रेडक्स पर खुदाई शुरू करने पर मैंने वास्तव में आरईएसटी सम्मेलनों को याद किया।

https://github.com/masylum/resting-ducks

मुझे यकीन नहीं है कि गीला समाधान उदाहरण हैं। मुझे लगता है कि पुस्तकालय इसके लिए बेहतर काम करते हैं। राज्य प्रबंधन लगभग हमेशा समान होता है, 2016 में हमें CRUD कोड नहीं लिखना चाहिए बल्कि अपने व्यावसायिक तर्क पर ध्यान केंद्रित करना चाहिए।

@EricSimons मैं वर्तमान में विभिन्न विकल्पों का मूल्यांकन कर रहा हूं जहां डेटा आवश्यकताओं को निर्दिष्ट करना है और डेटा कब लाना है। एक विकल्प कुछ रिलेश को लागू करना होगा - लेकिन मुझे लगता है कि यह थोड़ा अधिक है। किसी प्रोजेक्ट के लिए मैंने जो कुछ बनाया है वह लोडर विशेषता वाले मार्गों में मेरी लोडिंग आवश्यकताओं को निर्दिष्ट करना है:

let routes = <Route path='/' component={Layout}>
  <IndexRoute component={BooksIndex} />
  <Route path='/book/new' component={BooksNew} />
  <Route path='/book/:id' component={BooksShow} loader={BooksLoader} />
  <Route path='/book/:id/edit' component={BooksEdit} loader={BooksLoader} />
</Route>;

BooksLoader एक वर्ग है जो दो कार्यों को लागू करता है:

• जरूरत हैToSyncStore(params, store) सही है अगर स्टोर को सिंक करने की जरूरत है, अन्यथा गलत
• सिंकस्टोर (पैराम्स, स्टोर) स्टोर को सिंक करेगा और एक वादा वापस करेगा

यहां एक बहुत ही बुनियादी उदाहरण कार्यान्वयन है जिसे निश्चित रूप से कुछ स्मार्ट (जैसे ImmutableJS/Map) द्वारा प्रतिस्थापित किया जा सकता है:

import _ from 'lodash';
import * as Actions from 'actions';
import API from 'api';

export default class BooksLoader {
  needsToSyncStore(params, store) {
    let books = store.getState().books;

    if(books) {
      const book = _.findWhere(books.collection, { isbn: params.id });
      if(book) {
        return false;
      }
    }

    return true;
  }

  syncStore(params, store) {
    let { dispatch } = store;
    let api = new API();

    let loadBooks = Actions.loadBooks();
    return loadBooks(dispatch, store.getState);
  };
}

विचार यह है कि एक लोडर केवल उस राज्य की परवाह करता है जो एक मार्ग द्वारा प्रदान किया जाता है और रेडक्स स्टेट ट्री जो परीक्षण करना आसान बनाता है।

अगला भाग एक स्टोर लोडर है जो एक प्रतिक्रिया घटक है जो @ryanflorence AsyncProps (https://github.com/rackt/async-props) से बहुत अधिक प्रेरित है जिसे https://gist.github। com/sebastiandeutsch/e6148ca0741cc355248c

यह लोडर के लिए ReactRouter के मार्गों की जाँच कर रहा है और उन्हें क्रियान्वित कर रहा है। यह संदर्भों के माध्यम से लोडिंग स्थिति को भी उजागर करता है। कार्रवाई में यह इस तरह दिखेगा:

<Provider store={store}>
  <Router
    history={browserHistory}
    render={(props) => (
      <StoreLoader {...props} store={store} />
    )}>
      {routes}
    </Router>
</Provider>

मार्ग घटक में (ये विशेष घटक हैं जो राउटर से सीधे बच्चे हैं) मैं इस तरह के संदर्भ का उपयोग कर सकता हूं:

export class BooksShow extends React.Component {
  static contextTypes = {
    storeIsSynchronized: React.PropTypes.bool
  };
  ...
  render() {
    const { book } = this.props;

    if(this.context.storeIsSynchronized) {
      /* display components */
    } else {
      /* display loading spinner */
    }
}

export default connect(
  (state, props) => {
    return {
      book: _.findWhere(state.books.collection, { isbn: props.params.id } )
    }
  },
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(BooksEdit);

@gaearon आप इन विचारों के बारे में क्या सोचते हैं?

@sebastiandeutsch मुझे वह दृष्टिकोण पसंद है। मैं भी Async-Props के साथ प्रयोग कर रहा हूं, यहां आपके विचार वास्तव में अच्छे लग रहे हैं।

मैंने कल्पना की थी कि डेटा लाने के लिए एक अमूर्तता के अनुरूप उदाहरण के बजाय उदाहरण अधिक सामान्य होना चाहिए था। मैं वास्तव में https://github.com/optimizely/nuclear-js/tree/master/examples/rest-api को रेस्ट एपीआई के लिए स्टोर और एक्शन सेट करने के आसान तरीके के मूल उदाहरण के रूप में पसंद करता हूं।

मैंने इसे कैशिंग का समर्थन करने के लिए बढ़ाया है और यहां तक ​​​​कि एक स्टोर में चल रहे अनुरोधों को भी स्टोर किया है (ताकि अगर अनुरोध फिर से किया जाता है तो कॉलर को xhr को फिर से शुरू करने के बजाय स्थगित कर दिया जाता है। मैं जिस बारे में बात कर रहा हूं उसका एक और मजबूत उदाहरण यहां है : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api। और मैंने @jordangarcia की कुछ अवधारणाओं को बड़ी सफलता के साथ कॉपी किया है। मुझे लगता है कि यहां दृष्टिकोण अच्छी तरह से काम कर सकते हैं redux भी (सामान्यिज़र आदि के साथ)।

@EricSimons विषय वस्तु के बारे में अधिक मुद्दा है और अच्छा लिखने योग्य एपीआई ढूंढ रहा है या आप विशिष्ट दृष्टिकोण की तलाश में हैं?

मुझे ज्यादातर विषय वस्तु में दिलचस्पी है (सबसे खराब स्थिति के बाद से हम लोगों के उपयोग के लिए अपने स्वयं के लिखने योग्य एपीआई की मेजबानी कर सकते हैं)। बीटीडब्ल्यू से ऊपर के सभी टिप्पणीकारों का बहुत-बहुत धन्यवाद, यह चर्चा अब तक शानदार रही है। इन उदाहरणों में हमें क्या शामिल करना चाहिए, इस पर अधिक विचार/विचार सुनना अच्छा लगेगा।

FYI करें @ डैन-वीवर और इस पर काम करने में रुचि रखने वाले अन्य - बेझिझक मुझे एक नोट [email protected] शूट करें

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

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

यदि आप पाठ्यक्रम के लिए उदाहरण बनाने के लिए एक प्रारंभिक बिंदु चाहते हैं, तो शायद _webapp_ एक प्रेरणा हो सकती है। और मैं Redux में किए गए टेलीस्कोप के समान कुछ देखना पसंद करूंगा।

* _The जानकारी फ़ोल्डर वास्तुकला / निर्णय made._ के बारे में कुछ जानकारी शामिल है

_Sidenote:_ क्योंकि मैंने देखा है कि Redux में डेटा लाने के लिए कोई कहानी नहीं है, मैं वर्तमान में Relay के समान एक सिस्टम बना रहा हूँ जो Redux के साथ एकीकृत होता है। यही कारण है कि मैंने 2 महीने से _webapp_ को अपडेट नहीं किया है। यदि मैं उस प्रणाली को बनाने में सफल हो जाता हूं, तो मैं इसके साथ _webapp_ जारी रखूंगा।

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

इस कारण से "_The_ Redux के उन्नत TODOMVC" के साथ आना एक ऐसी युक्ति है जिसके लिए सभी उन्नत सुविधाओं की आवश्यकता होती है जिसका डैन ने पहले उल्लेख किया है।

जैसे-जैसे हम आगे बढ़ते हैं, मेरा मानना ​​है कि हम और अधिक अमूर्त/पुस्तकालय/ढांचे _आसपास_ Redux देखना शुरू करेंगे जो इस उन्नत एप्लिकेशन को प्रूफ-ऑफ-कॉन्सेप्ट के रूप में उपयोग कर सकते हैं। वास्तव में समय के साथ इसे गैर-Redux विशिष्ट होने के लिए पुनः ब्रांडेड किया जा सकता है।

एपीआई के मोर्चे पर मुझे यह देखना अच्छा लगेगा कि यह किसी प्रकार के मानक का पालन करता है ( JSON-API denormalisation और संबंधों का वर्णन करने के लिए एक उत्कृष्ट आधार प्रदान करता है) और अंत में इसके सामने एक GraphQL सर्वर है।

यह एक समुदाय के रूप में कैसे संरचित है, मुझे संदेह है कि हमारे पास एक कोर रेपो हो सकता है जिसमें एप्लिकेशन स्पेक, सर्वर कार्यान्वयन/साथ ही सभी मौजूदा कार्यान्वयन की सूची/तुलना चार्ट शामिल है।

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

पीएस मेरे पास रिएक्ट लंदन में जल्द ही एक "रियल वर्ल्ड रेडक्स" बात आ रही है (जहां मुझे उम्मीद है कि हाथ में और अधिक उन्नत मुद्दों का पता लगाने के लिए समय मिलेगा) तो उसके लिए देखें: डी

मैं इस पर काम करने के लिए तैयार हूं, मुझे लगता है कि नए लोगों को एक उपयोगी, टिप्पणी और समझाया गया Redux एप्लिकेशन प्रदान करना जो कि टूडू सूची नहीं है, एक अच्छा विचार है। क्या इस पर अभी तक @EricSimons पर कोई काम शुरू हुआ है?

redux के बॉयलरप्लेट को कम करने और इसके साथ कुछ वास्तविक दुनिया बनाने के तरीके के बारे में बहुत सारे समान प्रश्न प्रतीत होते हैं। मुझे लगता है कि मुझे एक बहुत अच्छा समाधान मिला (अन्य बातों के अलावा) जिसके बारे में मैंने यहां लिखा है:

https://medium.com/@timbur/react -automatic-redux-providers-and-replicators-c4e35a39f1

TL; DR: आप redux प्रदाता बना सकते हैं जो अपने propTypes आधार पर स्वचालित रूप से आपके घटकों से मेल खाते हैं। आपको वास्तव में एक components निर्देशिका, एक providers निर्देशिका, और एक वैकल्पिक लेकिन अनुशंसित themes निर्देशिका की आवश्यकता है। सब कुछ आसानी से विनिमेय, समझने योग्य, रखरखाव योग्य, विस्तार योग्य और पुन: प्रयोज्य है। इसमें और भी बहुत कुछ शामिल है जैसे क्लाइंट और सर्वर दोनों को हॉट रीलोडिंग, सर्वर रेंडरिंग, इत्यादि इत्यादि। मैंने आज पहले शामिल बॉयलरप्लेट के आधार पर स्क्रैच से एक ऐप बनाया और इसमें लगभग 10 मिनट का समय लगा। आमतौर पर इसमें 1 घंटा लगेगा। :)

एक प्रारंभिक प्रतिक्रिया अपनाने वाले के रूप में अनुभव से बोलते हुए मैं एक उदाहरण में जीथब एपीआई का उपयोग नहीं करना चाहता हूं।

• इसका प्रमाणीकरण किसी ऐसे व्यक्ति के लिए जटिल है जो "बस काम करता है" की तलाश में है।
• यह प्रयोग के अनुकूल नहीं है। एपीआई म्यूटेशन करते समय विनाशकारी होने से बचने के लिए, मुझे एक अलग/फेंकने वाला जीथब खाता बनाना होगा।

इसके बजाय कृपया एक साधारण कस्टम API का उपयोग करें। हम तीसरे पक्ष पर निर्भर नहीं होना चाहते हैं, और किसी को भी json-server में मेरे बॉटलडएपीआई उदाहरण ( अपना उदाहरण चलाने में सक्षम बनाना चाहते हैं।

यह जावास्क्रिप्ट, जावा, सी#, पीएचपी, आदि में अन्य बैकएंड कार्यान्वयन को भी अनुमति देगा। यह किकस्टार्ट विकास में मदद करेगा, इसकी सुंदर टर्न-की के रूप में।

ऊपर मेरी टिप्पणी में लिंक के भीतर बीटीडब्ल्यू, ब्लॉग ऐप बनाने के तरीके के बारे में विवरण है। मैं अगले सप्ताह के भीतर उपयोगकर्ता प्रमाणीकरण और वह सब जोड़ने की योजना बना रहा हूं।

हाय दोस्तों! मैं रिएक्टजेएस का अध्ययन कर रहा हूं और मैंने रिएक्ट + रेडक्स का उपयोग करके अपने व्यक्तिगत यूआरएल शॉर्टनर का एक संस्करण विकसित किया है। मेरा उदाहरण फ्रंटएंड डेवलपमेंट के लिए गुलप + ब्राउजराइज + बेबेलिफाई का उपयोग करता है। मैंने घटकों और कार्यों के लिए मोचा और एंजाइम का उपयोग करके इकाई परीक्षण लिखे। इस उदाहरण में यह भी है:

• संचालन बनाएं, पढ़ें और अपडेट करें
• जेसन वेब टोकन के साथ प्रमाणीकरण
• पृष्ठ पर अंक लगाना
• टैग
• कोर्स

इंटरफ़ेस और उपयोगिता में कुछ बग हैं। लेकिन यह काम कर रहा है =)
हो सकता है कि कोई इसे वास्तविक दुनिया के उदाहरण के आधार के रूप में उपयोग कर सके।

डेमो: https://gustavohenrique.github.io/gh1
स्रोत: https://github.com/gustavohenrique/gh1

मैं इस उदाहरण को बेहतर बनाने के बारे में सुझावों को स्वीकार करता हूं। धन्यवाद!

पार्टी के लिए थोड़ा देर हो चुकी है, लेकिन मैंने अभी एक पूर्ण प्रबंधन वेब एप्लिकेशन लॉन्च किया है जो Redux पर बनाया गया है।

हम async जॉब के लिए redux-thunk का उपयोग करते हैं, और redux-ignore का उपयोग करते हैं, जिसने हमारे शीर्ष-स्तरीय रिड्यूसर को फ़िल्टर करके एक आश्चर्यजनक सुधार (_on mobile_) प्रदान किया।
वेब ऐप 100% प्रतिक्रियाशील है, इसलिए मोबाइल पर इसका उपयोग/परीक्षण करना आसान है।

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

वैसे भी, यहाँ लिंक हैं http://www.handy-erp.com/en/
बस एक अकाउंट बनाएं और खुद को आउट करें।

@SebastienDaniel बधाई हो! यह एक सुंदर वेबसाइट है। क्या आपने रेडक्स भाग को किसी सार्वजनिक भंडार में रखा था?

धन्यवाद @gustavohenrique
दुर्भाग्य से नहीं, स्रोत सार्वजनिक रेपो में नहीं है। हालांकि, मैं किसी भी प्रश्न को कवर करने में मदद करने के लिए स्रोत का उपयोग करने के लिए खुला हूं या समुदाय की मदद करने के लिए डेमो बना सकता हूं।

मैं वास्तव में प्रतिरूपकता के उदाहरण देखना चाहूंगा। यदि आप बड़ी मात्रा में कार्यक्षमता के साथ एक ऐप बना रहे हैं, तो आप वास्तव में एकल जिम्मेदारी मॉड्यूल बनाने का एक तरीका ढूंढ रहे हैं। टीमों के लिए बेहतर, रखरखाव के लिए बेहतर।

सबसे पहले, शेयर कोड के लिए धन्यवाद!@gustavohenrique
अन्य बातें:
मुझे लगता है कि एक उपयोगकर्ता सूची हो सकती है? लॉग इन करें? रजिस्टर करें...
redux को इन उदाहरणों की आवश्यकता है!

मैं @gggin और @EricSimons से सहमत हूं कि इन सुविधाओं का पूरी तरह से विकसित उत्पादन तैयार संस्करण अद्भुत होगा:

प्रमाणीकरण (ईमेल/पास और oAuth, JWT)
ब्लॉग पोस्ट और ब्लॉग पोस्ट पर टिप्पणियों के लिए CRUD
निम्नलिखित उपयोगकर्ता
सभी ब्लॉगों का वैश्विक फ़ीड और आपके द्वारा अनुसरण किए जाने वाले उपयोगकर्ताओं के ब्लॉग का फ़ीड
टैगिंग सिस्टम
उपयोगकर्ता प्रोफ़ाइल / संपादन प्रोफ़ाइल जानकारी

इसके अलावा, एक बुनियादी भूमिका या अनुमति प्रणाली बहुत अच्छी होगी। गिटहब की टीमों या ट्रेलो के सदस्यों के बराबर कुछ

सबको नम्स्कार,

मैं पिछले कुछ हफ्तों में अपने अनुभव के आधार पर एक मजबूत redux crud api लिए एक ढीले प्रस्ताव पर काम कर रहा हूं:

https://github.com/ppiekarczyk/redux-crud-api-middleware/blob/master/README.md

कोई प्रतिक्रिया सराहनीय होगी। धन्यवाद!

मैं अभी जो एप्लिकेशन बना रहा हूं उसे लेने के लिए तैयार हूं और इसे ओपन सोर्स उदाहरण प्रोजेक्ट में भी परिवर्तित कर रहा हूं।

सभी को नमस्कार -- हमें यह घोषणा करते हुए खुशी हो रही है कि उदाहरण कोडबेस समीक्षा के लिए लगभग तैयार है। यह पूरी तरह से पूरी तरह से है और अधिकांश वास्तविक दुनिया के उपयोग के मामलों को शामिल करता है जिनके बारे में हमने इस धागे (ऑथ, सीआरयूडी, पेजिनेशन, आदि) में बात की है। @ vkarpov15 के पास इसे खत्म करने के लिए कुछ चीजें हैं, लेकिन इसे अगले सप्ताह की शुरुआत में तैयार होना चाहिए।

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

किसी भी प्रश्न का उत्तर देने में खुशी हुई और उत्कृष्ट चर्चा के लिए यहां सभी को धन्यवाद!

सुनने में तो अच्छा लगता है। तैयार होने पर संबंधित Redux FAQ प्रश्न में एक उल्लेख और लिंक जोड़ना सुनिश्चित करें।

जैसा कि वादा किया गया था, कोडबेस https://github.com/GoThinkster/redux-review पर समीक्षा के लिए तैयार है, हर किसी की प्रतिक्रिया सुनना अच्छा लगेगा। मुद्दों और जनसंपर्क का स्वागत है!

अरे दोस्तों, शानदार चर्चा और एक महान वास्तविक दुनिया का उदाहरण पेश करने के लिए बहुत-बहुत धन्यवाद..

ऐसे उदाहरणों की सूची में जोड़ने के लिए, मैं इस उदाहरण https://github.com/andrewngu/sound-redux पर आया, । ऐसा लगता है कि यह उन मानदंडों के योग्य भी है जिनके बारे में @gaearon बात कर रहे थे। लेकिन मुझे यकीन नहीं है, अगर कोई प्रतिक्रिया दे सकता है तो यह मददगार होगा। यदि यह अर्हता प्राप्त करता है, तो यह सूची में अच्छा जोड़ होगा। साथ ही यह पिछले डेढ़ साल से सक्रिय रूप से बना हुआ है।

और अंत में, भयानक वास्तविक दुनिया के उदाहरण के लिए @EricSimons को विशेष धन्यवाद।

मैंने वास्तव में एक अक्सर पूछे जाने वाले प्रश्न प्रविष्टि को जोड़ा था जो http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects पर कई वास्तविक-विश्व रिएक्ट और रेडक्स ऐप्स को इंगित करता है। (वास्तव में, मुझे पता है कि मैंने वह साउंड-रेडक्स ऐप पहले देखा है, लेकिन मुझे नहीं लगता कि मैंने इसे अपनी सूची में जोड़ा है। मुझे ऐसा करना होगा।)

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

और हाँ, उन सभी को धन्यवाद जिन्होंने चर्चा और उदाहरणों में योगदान दिया है!