freeCodeCamp/curriculum/challenges/arabic/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.arabic.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036144	Use Provider to Connect Redux to React	6	false

Description

في التحدي الأخير ، قمت بإنشاء مخزن Redux للتعامل مع صفيف الرسائل وقمت بإنشاء إجراء لإضافة رسائل جديدة. الخطوة التالية هي توفير إمكانية الوصول إلى متجر Redux والإجراءات التي يحتاجها لإرسال التحديثات. يقدم React Redux حزمة react-redux للمساعدة في إنجاز هذه المهام. يوفر React Redux واجهة برمجة تطبيقات صغيرة مع ميزتين رئيسيتين: Provider connect . تحد آخر يشمل connect . Provider عبارة عن مكون مجمّع من React Redux يلف تطبيق React. يتيح لك هذا المجمّع بعد ذلك الوصول إلى store Redux ووظائف dispatch عبر شجرة المكونات. يأخذ Provider اثنين من الأدوات الدعائية ، وهما متجر Redux والمكونات الفرعية لتطبيقك. قد يبدو تعريف Provider أحد مكونات التطبيق كما يلي:

<provider store = {store}>
<التطبيق />
</ مزود>

Instructions

يعرض محرر الشفرة الآن جميع رموز Redux و React من التحديات العديدة الماضية. يتضمن مخزن Redux والإجراءات ومكون 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