Redux: أمثلة من العالم الحقيقي (بما في ذلك CRUD والأنماط المتقدمة وما إلى ذلك)

أرغب في الحصول على مثال CRUD رسمي يتعامل مع:

• المصادقة
• تطبيع
• تحديثات متفائلة
• التحرير المحلي
• علاقات الكيانات
• ترقيم الصفحات

إذا كنت ترغب في بناء دورة تدريبية حول هذا ، فهذا أمر مذهل. ومع ذلك ، أعتقد أنه من المهم أن يتم المساهمة بالمثال نفسه في هذا الريبو حتى نتمكن من صيانته وتحديثه بأحدث التغييرات. لذلك يجب أن يكون متسقًا مع نظام البناء والاتفاقيات التي نستخدمها في الأمثلة الحالية.

هل لهذا معنى؟

أود أيضًا أن أرى من أين يجلب الأشخاص البيانات من واجهات برمجة التطبيقات.

gaearon سيكون المحتوى / الكود مفتوح المصدر ، لذا لا توجد مشكلة. نطلب فقط رابطًا للعودة إلينا في مكان ما على الصفحة :) (تحرير - يفضل استخدام نظام / اصطلاحات البناء الحالية بالنسبة لنا أيضًا)

sebastiandeutsch هل يمكنك توضيح ذلك قليلاً؟

منذ فترة ، بدأت في اللعب بكتابة مدير كلمات المرور باستخدام رد فعل + إعادة ، وحرف واحد فقط ، و eccrypto . قم بتخزين كلمات المرور ومشاركتها جميعًا دون إرسالها عبر السلك في شكل غير مشفر باستخدام ECIES. لم تصل أبدًا إلى الانتهاء حقًا ، لكنها يمكن أن ترضي جميع العناصر الموجودة في https://github.com/rackt/redux/issues/1353#issuecomment -178760036. هل هذا يبدو مثيرا للاهتمام؟

هههههههههههههه

يبدو هذا مثيرًا للاهتمام للغاية ولكني أخشى أنه يتعلق بالمجال قليلاً جدًا. سيرغب معظم الأشخاص في رؤية مثال CRUD عام (قوائم بالعناصر القابلة للتحرير التي يمكن أن ترتبط بأي من العناصر ، وما إلى ذلك) ، وأخشى أن التركيز على التشفير قد يجعل المثال أقل سهولة.

أنا مهتم كثيرًا بالتحرير المحلي / غير المتصل مع تحديثات متفائلة ، لدي بعض الوقت ولكني لست من ذوي الخبرة في تطبيق redux ، لقد حصلت فقط على تطبيق أصلي معقد ، ولكني تقريبًا محلي / غير متصل بالإنترنت.
ربما يمكننا كتابة الريبو والعمل عليه ومناقشته بشكل تدريجي؟
ماذا أيضًا عن التطبيقات "المعيارية"؟
فقط لمشاركة بعض الأفكار ، قمت بتدوين بعض الأفكار حول كيف أعتقد أنه يجب أن يكون التطبيق الأول غير المتصل بالإنترنت ، امنحه فرصة إذا كان لديك وقت لقضائه فيه! :)

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

لست متأكدًا من مدى انتشار المشكلة وما هو المستوى المستهدف للمطورين لهذه الدورة التدريبية ، ولكن أود أن أرى في مكان ما على الشبكة كيفية تصميم مكونات التطبيق المعقدة المنفذة في رد فعل + إعادة (مثل نموذج متعدد الخطوات أو معالج باستخدام يتم التحكم فيها بواسطة عدة مخفضات) بحيث يمكن إعادة استخدامها ككل في تطبيق آخر.

sompylasar لا تتردد في إنشاء مشكلة حول هذا الأمر في React Redux repo. يسعدني مناقشة مناهج إعادة استخدام أو عزل مكون Redux-الإدراك هناك.

إذا كنت تبحث عن مثال أولي على مستوى المبتدئين ، فهناك دائمًا دروس todo-mvc وجيش "البدء مع babel + redux + response + webpack" هناك. لست متأكدًا من وجود قيمة كبيرة لواحد آخر ، ينتهي بي الأمر بقراءة منشورتين جديدتين في المدونة حول هذا الموضوع كل أسبوع (ولكن ربما يمكنك إنشاء تطبيق يقوم تلقائيًا بإنشاء هذه البرامج التعليمية؟: p). أود أن أزعم أن البرنامج التعليمي ذي المستوى المتوسط ​​سيكون أكثر فائدة ، وأن تعلم IMO عن التشفير يمكن أن يكون ميزة جانبية جذابة.

أنا لا أبحث عن مثال على مستوى المبتدئين ، لكن الأجزاء المعقدة من CRUD (ترقيم الصفحات ، التطبيع ، التحديثات المتفائلة ، العلاقات) يجب أن تكون محور هذا المثال.

هل هذا يستهلك واجهة برمجة تطبيقات مخصصة أم موجودة؟ أم تركيبة؟

هذا هو السؤال الصعب. انا لا اعرف. قد تكون Github API فكرة جيدة لأنها قابلة للكتابة والمفاهيم مألوفة للجميع. أعرف أن ryanflorence عملت على شيء مشابه.

استهداف المطورين المتوسطين المتقدمين بالتأكيد بهذا ؛ كانت المبتدئين مشبعة ونادراً ما تغطي (العالم الحقيقي) الموضوعات الأصعب التي ذكرها دان أعلاه.

أنا منفتح على واجهة برمجة التطبيقات المخصصة و / أو الحالية - يسعدنا استضافة أي واجهات برمجة تطبيقات مخصصة على حساب aws الخاص بنا. لدينا أيضًا واجهة برمجة تطبيقات كاملة لنسخة Medium.com التي نبنيها لعدد قليل من الدورات التدريبية الأخرى التي يمكننا استخدامها ، كما سيكون كود مصدر الواجهة الخلفية متاحًا لها أيضًا إذا كان الناس فضوليين. يسعدني مشاركة التفاصيل إذا كان ذلك يبدو ممتعًا.

EricSimons أود معرفة المزيد عن النسخة المتوسطة.

تضمين التغريدة نحن نبني دورة كاملة في JS تحتوي على React / Redux كواجهة أمامية والعقدة كخلفية. سيكون لدينا الواجهة الخلفية API مستضافة بشكل مستقل للأشخاص الذين لا يرغبون في تشغيلها محليًا ، لذلك قد يكون مناسبًا لتدريس بعض الموضوعات الأكثر تعقيدًا أعلاه. تتضمن مجموعة الميزات للنسخة المتوسطة ما يلي:

• المصادقة (البريد الإلكتروني / المرور و 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. ماذا لو كان المكون الخاص بي يريد نتيجة الإجراء غير المتزامن؟ بالنسبة لي ، ظهر هذا في مكون ArticleForm الخاص بي مع حقل نموذج تحميل الصورة: أرسل إجراء "addImage" وعندما يتم تحميل الصورة أريد 1) إظهار معاينة للصورة التي تم تحميلها بناءً على URL و 2) أريد قم بتعيين عنوان URL للنموذج. لكني وجدت صعوبة في معرفة أفضل طريقة للقيام بذلك في Redux. كانت المشكلة التي وجدتها هي أنك بحاجة إلى أن تكون قادرًا على تعيين الحالة / الصورة المضافة حديثًا إلى عنصر في مكون النموذج ، ولكن 1) كيف تحصل على الصورة المضافة حديثًا و 2) ماذا لو كان هناك صورتان يتم تحميلهما في وقت واحد ، كيف هل تحصل على عنوان URL الصحيح للصورة للمكون الصحيح؟

من المؤكد أنني لم أقم بإعادة التشغيل إلا لبضعة أشهر ، لذا فقد تكون مشكلات سخيفة ، لكن كمبتدئ ، أخطأتني بالتأكيد وما زلت لا أشعر أن حلولي هي "الطريقة الصحيحة".

jonathaningram هل نظرت إلى redux-thunk على الإطلاق؟ كبديل لما تفعله أعلاه ، سيسمح لك بالإرسال من داخل عملك

babsonmatt نعم أنا أستخدمه بالفعل. لقد أسست التطبيق على مثال العالم الحقيقي الذي يستخدمه. ربما لا أستخدمه بكامل قدراته بالرغم من ذلك.

jonathaningram شكرا على

تضمين التغريدة نعم ، لا أريد أن أتجاهل المشكلة ولكني أردت فقط مشاركة خبراتي في "العالم الحقيقي" كمبتدئ متكرر ، والذي نأمل أن يساعد الأمثلة الجديدة التي تنشأ عن هذه المشكلة.

EricSimons أنا مهتم بالمساعدة. أقوم حاليًا بصيانة تطبيق CRUD باستخدام نيوي-جي وأعتقد أن الكثير من أفكاره ستترجم جيدًا إلى إعادة. اسمحوا لي أن أعرف إذا كنت تريد العصف الذهني.

لقد بدأت مؤخرًا مشروعًا لإدارة دولة CRUD (عبر REST). قادمة من Marionette/Backbone لقد فاتني حقًا اتفاقيات REST عندما بدأت الحفر على React / Redux.

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

لست متأكدا ما إذا كان الحل أمثلة. أعتقد أن المكتبات تعمل بشكل أفضل من أجل ذلك. دائمًا ما تكون إدارة الدولة هي نفسها ، في عام 2016 ، لا ينبغي أن نكتب كود CRUD ولكن يجب أن نركز على منطق أعمالنا.

EricSimons أقوم حاليًا بتقييم خيارات مختلفة حيث يتم تحديد احتياجات البيانات ومتى يتم إحضار البيانات. قد يكون أحد الخيارات هو تنفيذ شيء Relayish - لكن لدي شعور بأن هذا نوع من المبالغة. أحد الأشياء التي قمت بتعويضها لمشروع ما هو تحديد احتياجات التحميل الخاصة بي في المسارات باستخدام سمة أداة التحميل:

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 عبارة عن فئة تنفذ وظيفتين:

• تعيد needToSyncStore (params، store) القيمة الصحيحة إذا احتاج المتجر إلى المزامنة ، وإلا خطأ
• ستعمل syncStore (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) والذي يمكن استخدامه كـ RenderContext لـ ReactRouter: https: //gist.github. كوم / 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 كمثال أساسي لطريقة سهلة لإعداد المتاجر والإجراءات لواجهات برمجة تطبيقات Rest.

لقد قمت بتوسيعه لدعم التخزين المؤقت وحتى تخزين الطلبات الجارية في متجر (بحيث إذا تم تقديم الطلب مرة أخرى ، فسيحصل المتصل ببساطة على تأجيل بدلاً من إعادة تشغيل xhr. مثال أكثر قوة لما أتحدث عنه هنا : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api. ولقد قمت بنسخ بعض مفاهيم jordangarcia بنجاح كبير. أعتقد أن الأساليب هنا يمكن أن تعمل بشكل جيد مع إعادة كذلك (يرافقه normalizr الخ).

EricSimons هي المشكلة أكثر حول الموضوع وإيجاد واجهات برمجة تطبيقات جيدة قابلة للكتابة أم أنك تبحث عن أساليب محددة؟

أنا مهتم في الغالب بالموضوع (نظرًا لأنه في أسوأ الحالات ، يمكننا استضافة واجهات برمجة التطبيقات الخاصة بنا القابلة للكتابة ليستخدمها الأشخاص). شكراً جزيلاً لجميع المعلقين أعلاه بالمناسبة ، كانت هذه المناقشة رائعة حتى الآن. أرغب في سماع المزيد من الأفكار / الأفكار حول ما يجب أن نغطيه في هذه الأمثلة.

FYI @ dan-weaver وآخرون مهتمون بالعمل على هذا - لا تتردد في إرسال ملاحظة إلي [email protected]

في عالم Meteor ، يوجد مثال على مشروع كبير مفتوح المصدر نشأ من كتاب عن Meteor. هذا المشروع هو Telescope ، وهو تطبيق ويب مشابه لـ Reddit أو Hacker News. إذا كان لدى Redux مثال مشابه ، فسيكون ذلك رائعًا. تعلم الكثير من المطورين Meteor باتباع الكتاب وبناء نسخة أصغر من Telescope معه. سيغطي تطبيق مثل Telescope جميع الموضوعات التي أثارها Dan على تطبيق يعرفه معظم المطورين بالفعل (بسبب Hacker News و Reddit ..).

لقد بدأت في إنشاء الأساس لتطبيق مشابه قبل بضعة أشهر في webapp *. يحتوي هذا المشروع على عملية الإنشاء ، ووحدات css النمطية ، والمصادقة ، وخادم منفصل لواجهة برمجة التطبيقات ، و MongoDB ، والعرض من جانب الخادم ، و GraphQL والمزيد تم إعداده بالفعل (على الرغم من أن بعض الأشياء قد تكون قديمة بعض الشيء ، أو تحتاج إلى مزيد من العمل ، أو يمكن القيام بها أفضل). كما أنه يحتوي على تقسيم مخفض ، وهو شيء أعتقد أنه لا يوجد به أي مثال آخر. الأشياء الكبيرة التي تفتقر إليها هي حلول جيدة لجلب البيانات ، والتحديثات المتفائلة ، وبيانات الوقت الفعلي. أيضًا ، لقد عفا عليه الزمن بعض الشيء حيث يبدو أن شهرين من الزمان تبدو وكأنها أبدية في مدى سرعة تقدم كل شيء في الوقت الحالي :)

إذا كنت تريد نقطة بداية لإنشاء مثال للدورة التدريبية ، فربما يكون _webapp_ مصدر إلهام لك. وأود أن أرى شيئًا مشابهًا للتلسكوب يتم إجراؤه في Redux.

* _ يحتوي مجلد المعرفة على بعض المعلومات حول البنية / القرارات المتخذة.

_Sidenote: _ لأنني لاحظت أن Redux ليس لديه قصة لجلب البيانات ، فأنا أقوم حاليًا بإنشاء نظام مشابه لـ Relay يتكامل مع Redux. هذا هو السبب في أنني لم أقوم بتحديث _webapp_ لمدة شهرين. في حالة نجاحي في إنشاء هذا النظام ، سأواصل _webapp_ معه.

إحدى المشكلات التي تمت مواجهتها هي أن Redux مستوى منخفض جدًا وبالتالي لا يوجد رأي كبير حول كيفية إنشاء تطبيق حوله. لذلك ، فأنا غير متأكد مما إذا كان بإمكاننا الاحتفاظ ببساطة بقاعدة كود مثال واحد للتعلم منها نظرًا لوجود العديد من التجريدات الصالحة الممكنة بين الإعادة وواجهة المستخدم النهائية. يتضح هذا من خلال بعض المناقشات في هذا الموضوع حيث يتم تقديم العديد من الاحتمالات المختلفة لتحميل البيانات بدون فائز واضح - لا توجد طريقة واحدة صحيحة لأن مقاييس التطبيق تختلف اختلافًا كبيرًا.

لهذا السبب ، من المرغوب فيه الخروج بـ

بينما نمضي قدمًا ، أعتقد أننا سنبدأ في رؤية المزيد من التجريدات / المكتبات / أطر العمل _around_ Redux التي يمكن أن تستخدم هذا التطبيق المتقدم كدليل على المفهوم. في الواقع ، بمرور الوقت ، قد يتم تغيير العلامة التجارية هذه لتصبح غير خاصة بإعادة الإنتاج.

على واجهة API ، أود أن أراها تتبع نوعًا من المعايير (توفر JSON-API أساسًا ممتازًا لإلغاء التطابق ووصف العلاقات) وفي النهاية يكون أمامها خادم GraphQL.

بالنسبة إلى كيفية تنظيم هذا كمجتمع ، أعتقد أنه يمكن أن يكون لدينا ريبو أساسي يحتوي على مواصفات التطبيق ، وتنفيذ / عمليات الخادم بالإضافة إلى مخطط قائمة / مقارنة لجميع عمليات التنفيذ الحالية.

على جانب ، ولكن مرتبط جزئيًا ، لاحظ من الموضوع المحدد هنا ، أعتقد أنه من الأفضل لنا إعطاء الأولوية لهذه المشكلة في توضيح نطاق إعادة التشغيل - التأكيد على طبيعة المستوى المنخفض.

ملاحظة. لدي حديث عن "Real World Redux" قريبًا في React London (حيث آمل أن أحصل على وقت لاستكشاف المشكلات الأكثر تقدمًا في متناول اليد) لذا ابحث عن ذلك: D

سأكون جاهزًا للعمل على هذا ، أعتقد أن تزويد الوافدين الجدد بتطبيق Redux صالح للاستخدام والتعليق عليه وشرح ليس قائمة مهام هو فكرة رائعة. هل بدأ أي عمل على هذا بعدEricSimons؟

يبدو أن هناك الكثير من الأسئلة المماثلة حول كيفية تقليل النموذج المعياري لـ redux وبناء شيء حقيقي به. أعتقد أنني وجدت حلاً جيدًا (من بين أشياء أخرى) كتبت عنه هنا:

https://medium.com/@timbur/react-auto-redux-Provider-and-replicators-c4e35a39f1

TL ؛ DR: يمكنك إنشاء مزودي خدمات redux يتطابقون تلقائيًا مع مكوناتك بناءً على propTypes . كل ما تحتاجه حقًا هو دليل components ، ودليل providers ، ودليل اختياري ولكن موصى به themes . كل شيء قابل للتبديل بسهولة ومفهوم وقابل للصيانة والتمديد وإعادة الاستخدام. يوجد الكثير من الأشياء المضمنة في كل ذلك مثل إعادة التحميل الساخن لكل من العميل والخادم ، وعرض الخادم ، وما إلى ذلك ، وما إلى ذلك ، وما إلى ذلك ، وما إلى ذلك. عادة ما يستغرق الأمر ساعة واحدة. :)

بالحديث من التجربة كمتبني مبكّر ، أفضل عدم استخدام Github API في مثال.

• مصادقته معقدة للغاية بالنسبة لشخص يبحث عن شيء "يعمل فقط".
• انها ليست مناسبة للتجربة. لتجنب التدمير أثناء إجراء طفرات واجهة برمجة التطبيقات ، يجب أن أقوم بإنشاء حساب Github منفصل / سريع.

بدلاً من ذلك ، يرجى استخدام واجهة برمجة تطبيقات مخصصة بسيطة. لا نريد الاعتماد على الأطراف الثالثة ، وتمكين أي شخص من تشغيل مثيله الخاص مثل json-server .

سيسمح هذا أيضًا بتطبيقات الواجهة الخلفية للراحة الأخرى في Javascript ، و Java ، و C # ، و PHP ، وما إلى ذلك. وهذا من شأنه أن يساعد في بدء التطوير ، باعتباره مفتاح التسليم الجميل.

راجع للشغل داخل الرابط في تعليقي أعلاه ، هناك تفاصيل حول كيفية إنشاء تطبيق مدونة. أخطط لإضافة مصادقة المستخدم وكل ذلك خلال الأسبوع المقبل.

أهلا يا أصدقاء! أنا أدرس ReactJS وقمت بتطوير نسخة من أداة تقصير عناوين URL الخاصة بي باستخدام React + Redux. يستخدم المثال الخاص بي Gulp + Browserify + Babelify لتطوير الواجهة الأمامية. لقد كتبت اختبارات وحدة باستخدام Mocha و Enzyme للمكونات والإجراءات. يحتوي هذا المثال أيضًا على:

• إنشاء وقراءة وتحديث العمليات
• المصادقة باستخدام Json Web Token
• ترقيم الصفحات
• العلامات
• كورس

هناك بعض الأخطاء في الواجهة وسهولة الاستخدام. لكنها تعمل =)
ربما يمكن لشخص ما استخدامه كقاعدة لمثال من العالم الحقيقي.

عرض توضيحي: https://gustavohenrique.github.io/gh1
المصدر: https://github.com/gustavohenrique/gh1

أقبل الاقتراحات حول كيفية تحسين هذا المثال. شكرا!

لقد تأخرت قليلاً في الحفلة ، لكنني أطلقت للتو تطبيق ويب إداريًا كاملاً مبنيًا على Redux.

نحن نستخدم redux-thunk للوظائف غير المتزامنة ، ونستخدم redux-ignore التي قدمت تحسينًا مفاجئًا (_ على الهاتف المحمول_) ، فقط عن طريق تصفية مخفضات المستوى الأعلى لدينا.
تطبيق الويب مستجيب بنسبة 100٪ ، لذلك من السهل استخدامه / اختباره على الهاتف المحمول.

نحن ندير التحديثات المتفائلة من خلال "التراجع" عن الإجراء السابق. تعرف المخفضات المتأثرة كيفية تتبع طريق العودة إلى حالتها السابقة ، لذا فهي معزولة وفعالة تمامًا.

على أي حال ، ها هي الروابط http://www.handy-erp.com/en/
فقط قم بإنشاء حساب واقتلع أنفسكم.

تضمين التغريدة إنه موقع جميل. هل وضعت الجزء المعاد في أي مستودع عام؟

شكرا لكgustavohenrique
للأسف لا ، المصدر ليس في مستودع عام. ومع ذلك ، أنا منفتح تمامًا على استخدام المصدر للمساعدة في تغطية أي أسئلة أو ربما إنشاء عروض توضيحية لمساعدة المجتمع.

أود حقًا أن أرى أمثلة على النمطية. إذا كنت تقوم ببناء تطبيق بكمية هائلة من الوظائف ، فأنت تبحث حقًا عن طريقة لبناء وحدات مسؤولية فردية. أفضل للفرق ، أفضل للصيانة.

أولاً ، شكرًا لك على رمز المشاركة!gustavohenrique
اشياء اخرى:
أعتقد أنه قد تكون قائمة مستخدمين؟ تسجيل الدخول؟ تسجيل...
إعادة بحاجة إلى هذه الأمثلة!

أتفق مع gggin و إصدارًا كاملًا جاهزًا للإنتاج من هذه الميزات سيكون مذهلاً:

المصادقة (البريد الإلكتروني / المرور و oAuth ، JWT)
CRUD لمنشورات المدونة والتعليقات على منشورات المدونة
متابعة المستخدمين
موجز عالمي لجميع المدونات وخلاصة لمدونات المستخدمين الذين تتابعهم
نظام العلامات
ملفات تعريف المستخدم / تحرير معلومات الملف الشخصي

بالإضافة إلى ذلك ، سيكون نظام الأدوار أو الأذونات الأساسية رائعًا. شيء يعادل فرق GitHub أو أعضاء Trello

أهلا جميعا،

لقد كنت أعمل على اقتراح فضفاض للحصول على redux crud api قويًا استنادًا إلى تجربتي على مدار الأسبوعين الماضيين:

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

أي ردود فعل ستكون ممتنة. شكرا!

سأكون على استعداد لأخذ التطبيق الذي أقوم ببنائه الآن وتحويله إلى مثال مشروع مفتوح المصدر أيضًا.

مرحبًا بالجميع - يسعدنا أن نعلن أن نموذج مصدر الشفرة جاهز تقريبًا للمراجعة. إنه شامل للغاية ويغطي معظم حالات استخدام العالم الحقيقي التي تحدثنا عنها في هذا الموضوع (المصادقة ، CRUD ، ترقيم الصفحات ، إلخ). لدى @ vkarpov15 بعض الأشياء التي يجب الانتهاء منها ، ولكن يجب أن تكون جاهزة في وقت ما في وقت مبكر من الأسبوع المقبل.

يسعدنا مساعدتك في مراجعة قاعدة التعليمات البرمجية. أعلم أن gaearon قد ذكر أنه سيكون على استعداد لإلقاء نظرة قبل بضعة أشهر ، وستكون جميع التعليقات الواردة من المجتمع هنا ممتازة. سنستخدم هذا الريبو لقاعدة الكود الأولية أثناء المراجعة والتكرار ، ثم نقوم بتجميع النهائي في إعادة النشر الرسمية بمجرد أن تصبح جاهزة. لا تتردد في تمييز النجوم / مشاهدتها ، وسأقوم أيضًا بنشر تحديث في هذا الموضوع بمجرد أن يكون مصدر الشفرة متاحًا على الإنترنت وجاهزًا للمراجعة.

يسعدني الرد على أي سؤال وشكراً للجميع هنا على المناقشة الممتازة!

يبدو ذلك جيدا. تأكد من إضافة إشارة ورابط في سؤال الأسئلة الشائعة حول Redux عندما يكون جاهزًا.

كما وعدت ، قاعدة الكود جاهزة للمراجعة على https://github.com/GoThinkster/redux-review ، وأحب سماع ملاحظات الجميع. القضايا والعلاقات العامة موضع ترحيب!

مرحبًا يا رفاق ، شكرًا جزيلاً على المناقشة الرائعة وتقديم مثال رائع من العالم الحقيقي ..

فقط للإضافة إلى قائمة هذه الأمثلة ، صادفت هذا المثال https://github.com/andrewngu/sound-redux ، العرض التوضيحي العامل المنشور على https://soundredux.io/. يبدو أنه مؤهل أيضًا للمعايير التي كان يتحدث عنها gaearon . لكنني لست متأكدًا ، لذا سيكون من المفيد إذا كان بإمكان أي شخص تقديم ملاحظات. إذا كانت مؤهلة ، فستكون إضافة جيدة إلى القائمة. بالإضافة إلى الحفاظ عليها بنشاط لمدة عام ونصف العام الماضي.

وأخيرًا ، شكر خاص لـ EricSimons لمثال رائع من العالم الحقيقي.

لقد أضفت بالفعل إدخالًا للأسئلة الشائعة يشير إلى عدد من تطبيقات React و Redux في العالم الحقيقي ، على http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects. (في الواقع ، أعلم أنني رأيت تطبيق Sound-Redux هذا من قبل ، لكنني لا أعتقد أنني أضفته إلى قائمتي. يجب أن أفعل ذلك.)

سأقوم بإغلاق هذه المشكلة على أساس أنه لم تعد هناك حاجة فورية لإضافة مثال أكبر مباشرةً إلى Redux repo ، نظرًا لعدد التطبيقات "الحقيقية" المتاحة التي يمكننا يشير إلى. إذا رغب شخص ما في المساهمة بنشاط في مثال محدد في الريبو ، قل شيئًا ويمكننا إعادة فتحه.

ونعم ، شكرا لجميع الذين ساهموا في المناقشة والأمثلة!