react-redux
. وهو يوفر طريقة لتمرير مسترجع state
و dispatch
لديك رد فعل المكونات كما props
. خلال التحديات القليلة التالية ، أولاً ، ستقوم بإنشاء مكون React بسيط يسمح لك بإدخال رسائل نصية جديدة. تتم إضافة هذه إلى صفيف معروض في طريقة العرض. هذا يجب أن يكون مراجعة لطيفة لما تعلمته في دروس React. بعد ذلك ، ستقوم بإنشاء مخزن وإجراءات Redux التي تدير حالة مصفوفة الرسائل. وأخيرًا ، ستستخدم react-redux
لتوصيل مخزن Redux بالمكون الخاص بك ، وبالتالي استخراج الحالة المحلية في مخزن Redux. DisplayMessages
. أضف مُنشئًا إلى هذا المكوّن وأعد تهيئة هذه الحالة بحالة تحتوي على خاصيتين: input
، يتم تعيينها على سلسلة فارغة ، messages
، يتم تعيينها على مصفوفة فارغة. DisplayMessages
بعرض عنصر div
فارغ.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The DisplayMessages
component should render an empty div
element.");'
- text: يجب استدعاء منشئ DisplayMessages
بشكل صحيح مع super
، يمر في props
.
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The DisplayMessages
constructor should be called properly with super
, passing in props
.");'
- text: 'يجب أن يكون لمكون DisplayMessages
حالة أولية تساوي {input: "", messages: []}
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === "object" && initialState.input === "" && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), "The DisplayMessages
component should have an initial state equal to {input: "", messages: []}
.");'
```