6.1 KiB
6.1 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036144 | Use Provider to Connect Redux to React | 6 | false |
Description
react-redux
للمساعدة في إنجاز هذه المهام. يوفر React Redux واجهة برمجة تطبيقات صغيرة مع ميزتين رئيسيتين: Provider
connect
. تحد آخر يشمل connect
. Provider
عبارة عن مكون مجمّع من React Redux يلف تطبيق React. يتيح لك هذا المجمّع بعد ذلك الوصول إلى store
Redux ووظائف dispatch
عبر شجرة المكونات. يأخذ Provider
اثنين من الأدوات الدعائية ، وهما متجر Redux والمكونات الفرعية لتطبيقك. قد يبدو تعريف Provider
أحد مكونات التطبيق كما يلي: <provider store = {store}>
<التطبيق />
</ مزود>
Instructions
DisplayMessages
. والجزء الجديد الوحيد هو مكون AppWrapper
في الجزء السفلي. استخدم مكون المستوى الأعلى هذا لعرض Provider
من ReactRedux
، وتمرير مخزن Redux كدعم. ثم عرض مكون DisplayMessages
كطفل. بمجرد الانتهاء ، سترى مكون React الخاص بك مقدم إلى الصفحة. ملاحظة: React Redux متاح كمتغير شامل هنا ، حتى تتمكن من الوصول إلى مقدم الخدمة باستخدام ميزة التدوين النقطي. التعليمات البرمجية في المحرر الاستفادة من هذا وتعيينه إلى Provider
ثابت لك لاستخدامه في طريقة تقديم AppWrapper
. Tests
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.");'
- text: يجب أن يكون مكون مجمّع <code>Provider</code> يحتوي على <code>store</code> دعامة تم تمريره إليه ، يساوي مخزن Redux.
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes("<Providerstore={store}>"); })(), "The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.");'
- text: يجب أن يتم عرض <code>DisplayMessages</code> كطفل من <code>AppWrapper</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.");'
- text: يجب أن يقوم مكون <code>DisplayMessages</code> بعرض عنصر h2 و input و button و <code>ul</code> .
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 <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.");'
Challenge Seed
// Redux Code:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message
}
};
const messageReducer = (state = [], action) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};
const store = Redux.createStore(messageReducer);
// React Code:
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: ",
messages: this.state.messages.concat(currentMessage)
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
</div>
);
}
};
const Provider = ReactRedux.Provider;
class AppWrapper extends React.Component {
// render the Provider here
// change code above this line
};
After Test
console.info('after the test');
Solution
// solution required