<sectionid="description"> الآن بعد أن فهمت كيفية استخدام <code>connect</code> للاتصال بـ React to Redux ، يمكنك تطبيق ما تعلمته على مكون React الذي يتعامل مع الرسائل. في الدرس الأخير ، تم تسمية المكون الذي اتصلت به إلى Redux باسم <code>Presentational</code> ، ولم يكن هذا العنصر تعسفياً. يشير هذا المصطلح <i>عمومًا</i> إلى مكونات React غير المتصلة بشكل مباشر بـ Redux. فهم مسؤولون ببساطة عن عرض واجهة المستخدم ويقومون بذلك كدالة للدعائم التي يتلقونها. على النقيض من ذلك ، يتم توصيل مكونات الحاوية إلى Redux. عادة ما تكون هذه مسؤولة عن إرسال إجراءات إلى المخزن وغالبًا ما تتجاوز حالة المخزن إلى مكونات الأطفال كدعامات. </section>
## Instructions
undefined
## Tests
<sectionid='tests'>
```yml
tests:
- text: يجب أن يتم عرض <code>AppWrapper</code> إلى الصفحة.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render to the page.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.");'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.");'