Redux: فكيف تستخدم إعادة التعامل مع قماش html5

تم إنشاؤها على ٢١ يوليو ٢٠١٥ · 3تعليقات · مصدر: reduxjs/redux

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

لذا فإن مشكلتي هي: في هذا السيناريو ، من الواضح أن الحالة لن تكون مفيدة للغاية في عرض القماش لأن هذه هي مهمة رسم السياق. ومع ذلك ، لا تزال اللوحة تحتوي على "حالتها" ، وهي معلمة التنسيق الخاصة بها ، لكنني لا أريد أن يقوم React بتحديث عنصر لوحة HTML بمجرد تغيير state.layout لأنه كما قلت ، إنها مهمة الرسم السياق (وأفقد الرسوم المتحركة إذا فعلت ذلك ، لأنها إعادة عرض لعنصر HTML ، وليس اللوحة). لذلك ، الشيء الوحيد الذي أحتاجه هنا هو الإرسال بين المكونات عبر الإجراءات.

ولكن في Flux (نفس الشيء بالنسبة إلى Redux) ، من المتوقع تغيير الحالة لتشغيل إعادة عرض واجهة المستخدم وتعتمد واجهة المستخدم على الحالة نفسها. في اللوحة القماشية ، لا يزال من المتوقع أن تؤدي الإجراءات إلى تغيير الحالة ولكن يتم تقديم واجهة المستخدم (اللوحة القماشية) عن طريق إعادة الرسم.

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

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

مليون شكرا!

ملاحظة: لقد شاهدت مقطع الفيديو الخاص بك على youtube (بخصوص رد الفعل المحمل الساخن + خطاب الإحياء). باهر.

question

مصدر

rui-ktei

👍1

التعليق الأكثر فائدة

إذا فهمتك بشكل صحيح ، فهذه هي نفس المشكلة التي صادفتها مؤخرًا عن دمج D3 مع React. كنت بحاجة إلى إنشاء علامة <svg> الأولية وعرض حالتي ، وبعد ذلك مع تغير الحالة ، ابدأ الرسوم المتحركة d3 ، وأضف عناصر جديدة ، وأزل العناصر ، وما إلى ذلك.

تقدم مقالة StackOverflow هذه شرحًا لكيفية جعل React تجعل عنصر <svg> الخاص بك في المرة الأولى (أو في حالتك <canvas> ، ثم اجعل React تبقي أصابعها الصغيرة المتسخة بعيدًا عنه ، بينما لا يزال يمنحك فرصة لإعادة رسم الأشياء عندما تتغير الحالة:

هذا هو الكود من المقال:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

الشيء الأساسي الذي يجب ملاحظته هو أن shouldComponentUpdate() يُرجع دائمًا false ، لذلك لن تلمس React أبدًا هذا الجزء من DOM بعد التصيير الأولي.

يجب أن تكون قادرًا فقط على استبدال مكالمات d3 بالمكالمات إلى رمز العرض الخاص بك.

mindjuice في ٢٣ يوليو ٢٠١٥

👍4

ال 3 كومينتر

هذا هو الكود من المقال:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

يجب أن تكون قادرًا فقط على استبدال مكالمات d3 بالمكالمات إلى رمز العرض الخاص بك.

mindjuice في ٢٣ يوليو ٢٠١٥

👍4

mindjuice شكرا جزيلا لك. لقد ساعدني هذا بالتأكيد. بالمناسبة ، أنا روي إنفوتراك ، مؤلف هذا السؤال. كنت أستخدم حساب الشركة سابقاً ...