react-redux
للمساعدة في إنجاز هذه المهام. يوفر React Redux واجهة برمجة تطبيقات صغيرة مع ميزتين رئيسيتين: Provider
connect
. تحد آخر يشمل connect
. Provider
عبارة عن مكون مجمّع من React Redux يلف تطبيق React. يتيح لك هذا المجمّع بعد ذلك الوصول إلى store
Redux ووظائف dispatch
عبر شجرة المكونات. يأخذ Provider
اثنين من الأدوات الدعائية ، وهما متجر Redux والمكونات الفرعية لتطبيقك. قد يبدو تعريف Provider
أحد مكونات التطبيق كما يلي: <provider store = {store}>
<التطبيق />
</ مزود>
DisplayMessages
. والجزء الجديد الوحيد هو مكون AppWrapper
في الجزء السفلي. استخدم مكون المستوى الأعلى هذا لعرض Provider
من ReactRedux
، وتمرير مخزن Redux كدعم. ثم عرض مكون DisplayMessages
كطفل. بمجرد الانتهاء ، سترى مكون React الخاص بك مقدم إلى الصفحة. ملاحظة: React Redux متاح كمتغير شامل هنا ، حتى تتمكن من الوصول إلى مقدم الخدمة باستخدام ميزة التدوين النقطي. التعليمات البرمجية في المحرر الاستفادة من هذا وتعيينه إلى Provider
ثابت لك لاستخدامه في طريقة تقديم AppWrapper
. AppWrapper
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper
should render.");'
- text: يجب أن يكون مكون مجمّع Provider
يحتوي على store
دعامة تم تمريره إليه ، يساوي مخزن Redux.
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes("Provider
wrapper component should have a prop of store
passed to it, equal to the Redux store.");'
- text: يجب أن يتم عرض DisplayMessages
كطفل من AppWrapper
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "DisplayMessages
should render as a child of AppWrapper
.");'
- text: يجب أن يقوم مكون DisplayMessages
بعرض عنصر h2 و input و button و ul
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h2").length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("ul").length === 1; })(), "The DisplayMessages
component should render an h2, input, button, and ul
element.");'
```