React-dnd: استخدام redux connect جنبًا إلى جنب مع تعيين DropTarget

سأفعل ذلك على النحو التالي:

import { compose } from 'redux'

export default compose(
  DropTarget(dragTypes, storyTarget, collect),
  connect(mapStateToProps)
)(StoryEditor);

في رد فعل مستندات DNDgaearon الاستخدامات _.flow لتزيين مكون مع مكونات مستوى أعلى متعددة. لذلك إذا كنت أقرأ هذا بشكل صحيح ، فيمكننا بالفعل استخدام الدالة compose من redux ، أليس كذلك؟

@ ekeric13 Redux compose مطابق لـ _.flow مع وسيطات معكوسة. هذا هو،

compose(f, g, h)(x) === flow(h, g, f)(x) === f(g(h(x)))

gaearon باستخدام compose يعمل بشكل جيد بالنسبة لي ، لكنني لاحظت أن وثائق compose تقول إن معظم الوظائف غير الصحيحة التي تم تمريرها للإنشاء يجب أن تتوقع معلمة واحدة ، ومع ذلك يمكننا تمرير ثلاث وسيطات إلى DropTarget . لماذا هذا العمل؟

يؤلف (... وظائف)

يؤلف وظائف من اليمين إلى اليسار.

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

الحجج

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

BuilderArea.propTypes = {
  addPanel: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  panels: state.panels
});

export default compose(
  DropTarget(Types.PANEL_CARD, builderAreaTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  })),
  connect(
    mapStateToProps,
    { addPanel }
  )
)(BuilderArea);