4.2 KiB
4.2 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036147 | Connect Redux to React | 6 | false | قم بتوصيل Redux بالرد |
Description
mapStateToProps()
mapDispatchToProps()
، يمكنك استخدامها لتعيين state
dispatch
إلى props
لأحد مكونات React الخاصة بك. يمكن لأسلوب connect
من React Redux التعامل مع هذه المهمة. تأخذ هذه الطريقة الوسيطتين الاختياريتين ، mapStateToProps()
و mapDispatchToProps()
. وهي اختيارية لأنه قد يكون لديك مكون يحتاج فقط إلى الوصول إلى state
ولكنه لا يحتاج إلى إرسال أي إجراءات أو العكس. لاستخدام هذه الطريقة ، قم بتمرير الدوال كوسائط ، واتصل على الفور بالمكون الخاص بك. بناء الجملة هذا غير معتاد قليلاً ويشبه: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
ملاحظة: إذا كنت ترغب في حذف إحدى الوسيطات لأسلوب connect
، فأنت تقوم null
في مكانها. Instructions
mapStateToProps()
و mapDispatchToProps()
جديد يسمى Presentational
. قم بتوصيل هذا المكون بـ Redux باستخدام طريقة connect
من الكائن العالمي ReactRedux
، وقم ReactRedux
فورًا على مكون Presentational
. تعيين النتيجة إلى const
جديدة تسمى ConnectedComponent
يمثل المكون المتصل. هذا كل شيء ، الآن أنت متصل بـ Redux! حاول تغيير أي من وسائط connect
إلى null
ولاحظ نتائج الاختبار. Tests
tests:
- text: يجب <code>Presentational</code> مكون <code>Presentational</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> 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 <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.");'
- text: يجب أن يتلقى المكون <code>Presentational</code> a prop <code>submitNewMessage</code> عبر <code>connect</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.");'
Challenge Seed
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
const mapStateToProps = (state) => {
return {
messages: state
}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message));
}
}
};
class Presentational extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h3>This is a Presentational Component</h3>
}
};
const connect = ReactRedux.connect;
// change code below this line
After Test
console.info('after the test');
Solution
// solution required