mapStateToProps()
mapDispatchToProps()
، يمكنك استخدامها لتعيين state
dispatch
إلى props
لأحد مكونات React الخاصة بك. يمكن لأسلوب connect
من React Redux التعامل مع هذه المهمة. تأخذ هذه الطريقة الوسيطتين الاختياريتين ، mapStateToProps()
و mapDispatchToProps()
. وهي اختيارية لأنه قد يكون لديك مكون يحتاج فقط إلى الوصول إلى state
ولكنه لا يحتاج إلى إرسال أي إجراءات أو العكس. لاستخدام هذه الطريقة ، قم بتمرير الدوال كوسائط ، واتصل على الفور بالمكون الخاص بك. بناء الجملة هذا غير معتاد قليلاً ويشبه: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
ملاحظة: إذا كنت ترغب في حذف إحدى الوسيطات لأسلوب connect
، فأنت تقوم null
في مكانها. mapStateToProps()
و mapDispatchToProps()
جديد يسمى Presentational
. قم بتوصيل هذا المكون بـ Redux باستخدام طريقة connect
من الكائن العالمي ReactRedux
، وقم ReactRedux
فورًا على مكون Presentational
. تعيين النتيجة إلى const
جديدة تسمى ConnectedComponent
يمثل المكون المتصل. هذا كل شيء ، الآن أنت متصل بـ Redux! حاول تغيير أي من وسائط connect
إلى null
ولاحظ نتائج الاختبار. Presentational
مكون Presentational
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational
component should render.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The Presentational
component should receive a prop messages
via connect
.");'
- text: يجب أن يتلقى المكون Presentational
a prop submitNewMessage
عبر connect
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational
component should receive a prop submitNewMessage
via connect
.");'
```