إن إحياء الحياة من خلال الإحياء هو ببساطة إنجيل. إنه بسيط للغاية وأنيق. تسبيح عظيم! ! !

بالمناسبة ، رأيت بالصدفة شخصًا أجنبيًا أعاد نشره على Twitter اليوم ، اعتقدت أنه كتبه شخص أجنبي ، لكنني لم أتوقع أن يكون زميلًا في Alipay ، 👍

نتطلع إلى توسيع الآثار

هل تستخدم بيئة إنتاج Alipay هذه العمارة؟

ظهرbesteric dva للتو ، ولم يتم تطبيقه بعد ، ولكن تم استخدام بنية التطبيق الكامنة وراءه لفترة من الوقت.

يمكن كتابة المخفض على النحو التالي:

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

هذا يجعل من الممكن تطبيق بعض الطرق ذات الترتيب الأعلى على المخفض.

الحمد لله ، لقد كتبت بعض العروض وهناك مشكلة واحدة فقط ، يمكن استخدام النموذج فقط
app.model(Model1); app.model(Model2);
هل هذه الطريقة لإكمال الجمع ، في الواقع ، أعتقد أن المثالية هي
app.model([Model1,Model2])
نوع من

إنه أمر مزعج للغاية لتمرير الإرسال بين المكونات ، ضع في اعتبارك الحل التالي

لا تستخدم bindActionCreators ؟

هل السيناريو المحدد للاستخدام المتقدم لمخفضyesmeck redo/undo فقط؟ لا أريد أن يكون dva مرنًا للغاية ، وسأفكر في إضافته من خلال الملحق في المستقبل.

نستخدم الكثير في مشروعنا. على سبيل المثال ، سنستخرج الأجزاء المتشابهة من عدة مخفضات إلى طريقة عالية المستوى لتعديل المخفض الأصلي ، وهناك طرق عالية المستوى تسمح للمخفض بإعادة ضبط الحالة عند المسار التغييرات. ، وهذا https://github.com/erikras/multireducer

@ Tinker404 أشعر أنه سيكون أكثر وضوحًا للإعلان عن النموذج بشكل منفصل ، وسيكون من الأسهل الإضافة والحذف. سأكتب هذا:

app.model(require('../models/a'));
app.model(require('../models/b'));

JimmyLv شخصيًا يفضل عدم استخدام actionCreator ، ولكن فقط dispatch .

yesmeck ، حسنًا ، سأفكر في الأمر مرة أخرى.

هناك أيضًا طرق ذات ترتيب أعلى تسمح للمخفض بإعادة ضبط الحالة عندما يتغير المسار

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

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

في هذه الحالة ، يحتاج كل مخفض يحتاج إلى إعادة تعيين إلى كتابة منطق إعادة التعيين. إذا استخدمنا طريقة عالية المستوى ، فسنحتاج فقط إلى القيام بذلك الآن:

combineReducers({
  products: composeReducers({  // composeReducers 的实现见下面
    recycle(LOCATION_CHANGE, initialState),  // recycle 用来在路由变化时重置状态
    products
  })
})

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

// reducers/products.js
const reducer = (state, { type, action}) => {
  switch (type) {
    case 'products/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

// reducers/users.js
const reducer = (state, { type, payload}) => {
  switch (type) {
    case 'users/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

هنا المخفضان متماثلان تقريبًا ، لذلك نستخرجهما ونكتب مخفض القائمة:

const list = (actionType) => {
  return (state, { type, payload }) => {
    switch (type) {
      case actionType:
        return {
          ...state,
          loading: false,
          list: payload
        }
        break;
      default:
        return state
    }
  }
}

ثم نطبق composeReducers لدمج هذه المخفضات الثلاثة:

function composeReducers(...reducers) {
  return (state, action) => {
    if (reducers.length === 0) {
      return state
    }

    const last = reducers[reducers.length - 1]
    const rest = reducers.slice(0, -1)

    return rest.reduceRight((enhanced, reducer) => reducer(enhanced, action), last(state, action))
  }
}

بهذه الطريقة ، يصبح المخفض لقائمة المنتجات وقائمة المستخدمين كما يلي:

// reducers/products.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('products/FETCH_SUCCESS'))

// reducers/users.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('users/FETCH_SUCCESS'))

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

yesmeck 👍 ، لقد تم التقليل من أهمية دور مُحسِّن المخفض من قبل.

sorrycc هل يمكنك أن تقول لماذا؟ هل تم استدعاؤه صراحةً بمقارنة dispatch ؟

@ Tinker404 أشعر أنه سيكون أكثر وضوحًا للإعلان عن النموذج بشكل منفصل ، وسيكون من الأسهل الإضافة والحذف. سأكتب هذا:
app.model (تتطلب ('../ Models / a')) ؛
app.model (تتطلب ('../ Models / b')) ؛

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

// models是个文件夹，有很多model
import models from './models';

models.forEach((m)=>{
    app.model(m);
});

// models.js
const context = require.context('./', false, /\.js$/);
const keys = context.keys().filter(item => item !== './index.js');
const models = [];
for (let i = 0; i < keys.length; i++) {
  models.push(context(keys[i]));
}
export default models;

انها جدا D.VA.

لقد وجدت استخدام مكون النموذج antd في لوحة تحكم المستخدم. أتذكر أنه لا يمكن استخدامه لمكون خالص. هل هو ممكن الآن؟

coding لا أذكر أن هناك قيودًا ، يمكن طرح مشكلات مع antd على https://github.com/ant-design/ant-design/issues .

https://github.com/react-component/form/blob/master/README.md
جاء في الملاحظة.

مرحبًا ، أريد استخدام dva الخاص بك. حاليًا ، أستخدم بنية الدليل التي تم إنشاؤها بواسطة سقالات React Webpack Redux. لقد قمت بتغيير الكود بالإشارة إلى مثال لوحة تحكم المستخدم في مثالك ، ولكن لا يوجد شيء بعد البدء. هل يمكنك المساعدة أعرف أين هو؟ حدث خطأ ما ، عنوان مشروعي: https://github.com/baiyulong/lenovo_parts

baiyulong لماذا لا تفعل ذلك بشكل مباشر على أساس هيكل دليل لوحة تحكم المستخدم؟

sorrycc أنا أستخدم هيكل دليل لوحة تحكم المستخدم الآن. هل هناك أي معاملة خاصة أو كتابة لتوجيه dva؟
export default function({ history }) {
return (
<Router history={history}>
<IndexRoute component={HomePage} />
<Route path='/' component={HomePage}>
<Route path='/create' component={CreateOrder} />
</Route>
</Router>
)
}
هذا المسار الذي كتبته ، يمكن لـ HomePage ، لقد كتبت رابط <Link to='/create'>Create</Link> ، لا يمكنني الانتقال إلى مكون CreateOrder بعد النقر فوقه

لا توجد طريقة خاصة لكتابة مسار baiyulong dva ، يرجى المحاولة:

1. هل هناك خطأ
2. حاول الوصول إلى / إنشاء المسار مباشرة

@ nikogu شكرًا جزيلاً ، سأكون بخير بعد أن أحصل على التداخل

مرحبًا ، هل يمكن لـ dva دعم التحميل الساخن للنماذج؟

@ kkkf1190 يفكر في هذا وسيدعمه.

👍

أردت فقط أن أقول شكرا لكم. . .

لطالما اعتقدت أن سقالات vue-cli لـ vuejs جيدة جدًا. بعد قراءة هذا ، تغير تفكيري تمامًا.

إطار رائع جدا! تم البحث لفترة من الوقت. sorrycc أريد أن أسأل يوندا عن سؤالين:

1. هل يمكن استخدام dva بشكل مثالي في التفاعل مع المشاريع المحلية؟
2. هل يمكن أن تدعم dva + responsejs العرض من جانب الخادم جيدًا؟

تضمين التغريدة

1. دعم رد الفعل الأصلي ، مثال مرجعي: https://github.com/sorrycc/dva-example-react-native
2. لا توجد مشكلة في تشغيل الخادم من الناحية النظرية. يدعم كل من جهاز التوجيه وإعادة التوجيه خلفه SSR ، ولكن الأمر سيستغرق بعض الوقت لتطبيقه على dva ، لأنه يجب تقويم المنطق ذي الصلة وتعبئته جيدًا

sorrycc هل يوجد حل لدعم مخفض الترتيب العالي الآن؟ يستخدم مشروعنا الكثير من مخفضات الجودة العالية بسبب إعادة الاستخدام

بدعم من ancheel ، يمكن أن يكون عالميًا أو محليًا ، حالة استخدام مرجعية: https://github.com/dvajs/dva/blob/master/test/reducers-test.js

بعد تعديل حالة النموذج وكيفية تعديله مرة أخرى ، تحدث هذه المشكلة دائمًا الآن
antd.js: 32924 تحذير: setState (...): لا يمكن التحديث أثناء انتقال الحالة الحالية (مثل داخل render أو مُنشئ مكون آخر). يجب أن تكون طرق العرض وظيفة خالصة من props و state ؛ المُنشئ الآثار الجانبية هي مضاد للنمط ، ولكن يمكن نقلها إلى componentWillMount .

مثير للغاية ، حاول استخدامه في بيئة الإنتاج ، ونأمل في مواصلة التحسين والتحسين

نيرف هذا!

عمل جيد شكرا ！！

sorrycc نتطلع إلى دعم العرض من جانب الخادم!

بدعم من mountainmoon ، راجع https://github.com/sorrycc/dva-boilerplate-isomorphic .

جاءت موجة عجلات: +1:

مرحبًا ، لقد تواصلت للتو مع تعلم هذا dva. بعد قراءة الكود لبضعة أيام ، لدي بعض الأسئلة في قلبي. أود أن أسأل:
لقد رأيت أن العروض التوضيحية الخاصة بك كلها تطبيقات من صفحة واحدة ، لكنها كلها تطبيقات متعددة الصفحات قيد التطوير. أود أن أسأل ، إذا لم يتم استخدام التوجيه في تطوير التطبيقات متعددة الصفحات ، فكيف يمكنني تحميل المكونات بدلاً من ذلك ، سؤال أحمق. إنه أمر محير بعض الشيء ، لأنني لا أستخدم التوجيه ، لذا فإن المستمع الذي تم تعيينه في النماذج ليس واضحًا من أين يتم تشغيله:
history.listen (الموقع => {
إذا (location.pathname === '/ users') {
إرسال({
اكتب: "querySuccess" ،
الحمولة: {}
})
}
})
ملاحظة: عند تحميل البيانات في طريقة querySuccess واستخدام اتصال التصدير الافتراضي (mapStateToProps) (المستخدمون) ؛ تم أيضًا الإبلاغ عن خطأ:
connect.js: 41 خطأ في النوع غير معلوم: لا يمكن استدعاء فئة كدالة
أشعر وكأنني أحمق في لحظة ، لا أعرف ما إذا كان بإمكاني أن أتعبك لتوضيح ذلك لي ، شكرًا لك!

لماذا دي في ايه؟ الإنجليزية من فضلك

لا أحب حقًا طريقة الكتابة هذه.

codering لقد ذكرت استخدام مكونات شكل antd في لوحة تحكم المستخدم. أتذكر أنه لا يمكن استخدامها لمكونات نقية. هل هذا ممكن الآن؟
لقد صادفته أيضًا كثيرًا. إذا كان مكونًا ذا وظيفة خالصة ، فلا يمكن الحصول على وظيفة getFieldDecorator من خلال props.form.getFieldDecorator. إذا كنت تستخدم extends لإنشاء مكون ، فيمكنك الحصول عليها.
لا أعلم إن كان لدى الله حل sorrycc

هل يمكنك إطلاق نفس الصفحة باللغة الإنجليزية من فضلك؟ لسنا قادرين على فهم هذا ، ولماذا نحتاج إلى dva.

مرحبًا ، إذا كان مشروعًا كبيرًا ، فستكون حالته كبيرة جدًا ، وستكون معالجته مرهقة للغاية. هل يجب تقسيمه إلى نماذج متعددة؟

@ yazhou-zyz لدي نفس المشكلة مثلك:
تحذير: setState (...): لا يمكن التحديث أثناء انتقال الحالة الحالية (مثل داخل تصيير أو مُنشئ مكون آخر). يجب أن تكون طرق العرض وظيفة خالصة للدعامات والحالة ؛ الآثار الجانبية للمُنشئ هي مضاد للنمط ، لكن يمكن نقلها إلى componentWillMount.
أود أن أسأل كيف حللت ذلك؟

يتعلم

استمر في الدراسة

dva ذات قيمة مرجعية كبيرة لمشاريع البناء.

عمل جيد ~

أين يمكنني أن أجد المستندات باللغة الإنجليزية ؟؟؟ تعتبر ترجمة الموضوع باستخدام محركات المترجم إشكالية والفهم غير كافٍ. مع اللغة الإنجليزية ، يمكنكم الوصول إلى العالم. ثابر على العمل الجيد!! :صاروخ:

لم تتم تجربة dva في إصدارات React-original 0.47.X و React16.0.0

لطالما كان vecold قادرًا على استخدامه ، قائلاً إنه لا يمكن استخدام رمز الدعوة أو رسالة الخطأ

هل هناك فرصة للحصول على الترجمة الإنجليزية للمستندات؟
شكرا!

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

حسن جدا
لكنها تبني كل الصفحات عندما آمل أن أبني صفحة واحدة

_ترجمة غير رسمية_

لماذا Dva؟

الإحياء أمر جيد. ولكن هناك الكثير من المفاهيم والمخفضات المنفصلة والملاحم والإجراءات (مقسمة إلى ملفات مختلفة)

1. يجب التبديل بين المخفضات والحكماء والإجراءات بشكل متكرر
2. الإزعاج من تنظيم نماذج الأعمال (أو نماذج المجال). بالنسبة إلى exp. ، عندما يكون لدينا بالفعل user_list ، ويكون product_list مطلوبًا ، فيجب عندئذٍ تكرار نسخة من الملف
3. من الصعب كتابة الملحمة. يجب أن تصنع شوكة -> مراقب -> عامل لكل فعل منفرد.
4. الدخول شاق ومعقد

ما هو Dva؟

إنه غلاف خفيف على الإطار الحالي (إعادة + جهاز توجيه رد الفعل + إعادة إرسال الملحمة ...). لا يوجد مفهوم جديد. <كود 100 سطر. (مستوحى من Elm and choo.)

إنه إطار عمل وليس مكتبة. مثل Ember.js ، فإنه يقيد الطريقة التي تكتب بها كل جزء. إنه أكثر قابلية للتحكم في العمل الجماعي. يقوم Dva بتغليف جميع التبعيات باستثناء التفاعل والتفاعل-dom كاعتمادات نظير

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

الوظيفة الأساسية هي app.model . إنه يغلف المخفض ، الحالة الأولية ، الإجراء ، الملحمة تمامًا.

app.model({
  namespace: 'products',
  state: {
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});
    },
  ],
  effects: {
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

اعتدنا على إنشاء sagas/products.js, reducers/products.js actions/products.js والتبديل بينهم.

النقطة الأساسية:

• مساحة الاسم: key لـ reducer في كائن rootReducer
• الولاية: initialState من reducer
• الاشتراك: المفهوم الجديد لـ [email protected] ، يتم تنفيذه عندما يكون dom جاهزًا: وداعًا لـ FRP
• الآثار: أسهل حكيم
• مخفضات

كيف تستعمل

انظر الأمثلة

خريطة الطريق

• إعادة التحميل السريع devtool
• التكوين الديناميكي لجهاز التوجيه
• يدعم Effects المزيد من طرز saga
• اختبار الوحدة
• المزيد من الأمثلة: todolist ، المستخدمون في antd-init ، المنتجات الشعبية

التعليمات

أداة التطوير تدعم؟

متوافق مع أداة redux-devtool و css تحميل الكبد. بحاجة إلى مزيد من العمل لإعادة التحميل السريع

جيد لحث البيئة؟

بالتأكيد

بما في ذلك جميع وظائف redux + redux-saga؟

نعم

توافق المتصفحات؟

لا IE8 بسبب إعادة الملحمة. (قد يطبق لاحقًا thunk ، وعدًا ، يمكن ملاحظته كامتدادات على طبقة التأثيرات)

إرضاء مماثلة

['products/query']: function*() {}
['products/query'](state) {}

ما هو النحو؟ هل يمكن استخدام المصفوفات كأسماء وظائف؟

clemTheDasher اسم الوظيفة يمكن حسابه بالمفتاح ( ليس مصفوفة) في جافا سكريبت. مرجع أكثر تفصيلاً لتعريفات الأسلوب |

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // compare getter/setter syntax:
  get property() {},
  set property(value) {}
};

تقارير الوافد الجديد ، تعال إلى هنا واستمر في العمل الجاد لتعلم المعرفة الأمامية

clemTheDasher هذه خاصية محسوبة.

لماذا الرابط https://github.com/dvajs/dva/tree/master/examples/count 404؟

يتعلم!

انظروا الى الله

الحمد لله ، شكرا لك على المصدر المفتوح

هل لا يسمح لي أن أتعلم منك يا رفاق!

لقد تعلمت ، شكرًا لك على وجود مثل هذا الإطار المناسب لنا لاستخدامه

انتهت صلاحية الروابط التجريبية على جيثب.

sorrycc هل يدعم dva التقديم من جانب الخادم الآن؟

يمكن كتابة المخفض على النحو التالي:

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

هذا يجعل من الممكن تطبيق بعض الطرق ذات الترتيب الأعلى على المخفض.

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

من بعض النواحي ، فإن فكرة Vuex أسهل في القراءة وأكثر طبيعية. اكتب شيئًا كهذا (ليس بالضبط).

const mutation = {
  ['products/query'](state) {
    state.loading = true
  },
  ['products/query/success'](state, payload) {
    state.loading = false
    state.list = payload
  }
}

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

اسألني ما إذا كانت صفحة المثال لموقع الويب الرسمي لـ dva لا تظهر وتبلغ عن خطأ ، هل هي ترقية؟

إرضاء مماثلة

['products/query']: function*() {}
['products/query'](state) {}

ما هو النحو؟ هل يمكن استخدام المصفوفات كأسماء وظائف؟

يسمح ES6 للأحرف بتعريف الكائنات ، (التعبير) كاسم خاصية الكائن ، أي وضع التعبير بين قوسين مربعين.
مثل

obj = {
  ['xxname']: 'what ever you defined',
  ['xxyy'](args) {
    ....
  }
}

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

yesmeck 👍 ، لقد تم التقليل من أهمية دور مُحسِّن المخفض من قبل.

لا أعرف ما إذا كان هناك دعم هنا؟