freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036147	Connect Redux to React	6	false		قم بتوصيل Redux بالرد

Description

الآن بعد أن قمت بكتابة mapStateToProps() mapDispatchToProps() ، يمكنك استخدامها لتعيين state dispatch إلى props لأحد مكونات React الخاصة بك. يمكن لأسلوب connect من React Redux التعامل مع هذه المهمة. تأخذ هذه الطريقة الوسيطتين الاختياريتين ، mapStateToProps() و mapDispatchToProps() . وهي اختيارية لأنه قد يكون لديك مكون يحتاج فقط إلى الوصول إلى state ولكنه لا يحتاج إلى إرسال أي إجراءات أو العكس. لاستخدام هذه الطريقة ، قم بتمرير الدوال كوسائط ، واتصل على الفور بالمكون الخاص بك. بناء الجملة هذا غير معتاد قليلاً ويشبه: connect(mapStateToProps, mapDispatchToProps)(MyComponent) ملاحظة: إذا كنت ترغب في حذف إحدى الوسيطات لأسلوب connect ، فأنت تقوم null في مكانها.

Instructions

يحتوي محرر التعليمات البرمجية على mapStateToProps() و mapDispatchToProps() جديد يسمى Presentational . قم بتوصيل هذا المكون بـ Redux باستخدام طريقة connect من الكائن العالمي ReactRedux ، وقم ReactRedux فورًا على مكون Presentational . تعيين النتيجة إلى const جديدة تسمى ConnectedComponent يمثل المكون المتصل. هذا كل شيء ، الآن أنت متصل بـ Redux! حاول تغيير أي من وسائط connect إلى null ولاحظ نتائج الاختبار.

Tests

tests:
  - text: يجب <code>Presentational</code> مكون <code>Presentational</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render.");'
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.");'
  - text: يجب أن يتلقى المكون <code>Presentational</code> a prop <code>submitNewMessage</code> عبر <code>connect</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.");'

Challenge Seed

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;
// change code below this line

After Test

console.info('after the test');

Solution

// solution required

4.2 KiB Raw Blame History