---
id: 5a24c314108439a4d4036147
title: Connect Redux to React
challengeType: 6
isRequired: false
videoUrl: ''
localeTitle: قم بتوصيل 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
```yml
tests:
- text: يجب 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.");'
```
## Challenge Seed
```jsx
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
This is a Presentational Component
}
};
const connect = ReactRedux.connect;
// change code below this line
```
### After Test
```js
console.info('after the test');
```
## Solution
```js
// solution required
```