4.9 KiB
4.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036141 | Getting Started with React Redux | 6 | false | الابتداء مع React Redux |
Description
react-redux
. وهو يوفر طريقة لتمرير مسترجع state
و dispatch
لديك رد فعل المكونات كما props
. خلال التحديات القليلة التالية ، أولاً ، ستقوم بإنشاء مكون React بسيط يسمح لك بإدخال رسائل نصية جديدة. تتم إضافة هذه إلى صفيف معروض في طريقة العرض. هذا يجب أن يكون مراجعة لطيفة لما تعلمته في دروس React. بعد ذلك ، ستقوم بإنشاء مخزن وإجراءات Redux التي تدير حالة مصفوفة الرسائل. وأخيرًا ، ستستخدم react-redux
لتوصيل مخزن Redux بالمكون الخاص بك ، وبالتالي استخراج الحالة المحلية في مخزن Redux. Instructions
DisplayMessages
. أضف مُنشئًا إلى هذا المكوّن وأعد تهيئة هذه الحالة بحالة تحتوي على خاصيتين: input
، يتم تعيينها على سلسلة فارغة ، messages
، يتم تعيينها على مصفوفة فارغة. Tests
tests:
- text: يجب أن يقوم مكون <code>DisplayMessages</code> بعرض عنصر <code>div</code> فارغ.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.");'
- text: يجب استدعاء منشئ <code>DisplayMessages</code> بشكل صحيح مع <code>super</code> ، يمر في <code>props</code> .
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.");'
- text: 'يجب أن يكون لمكون <code>DisplayMessages</code> حالة أولية تساوي <code>{input: "", messages: []}</code> .'
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 <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.");'
Challenge Seed
class DisplayMessages extends React.Component {
// change code below this line
// change code above this line
render() {
return <div />
}
};
After Test
console.info('after the test');
Solution
// solution required