freeCodeCamp/curriculum/challenges/arabic/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.arabic.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036141	Getting Started with React Redux	6	false		الابتداء مع React Redux

Description

تقدم هذه السلسلة من التحديات كيفية استخدام Redux مع React. أولاً ، إليك مراجعة لبعض المبادئ الأساسية لكل تقنية. React هي مكتبة ملفات شخصية تقدمها مع البيانات ، ثم تعرض طريقة العرض بطريقة فعالة ويمكن التنبؤ بها. Redux هو إطار عمل لإدارة الولاية يمكنك استخدامه لتبسيط إدارة حالة التطبيق الخاص بك. عادةً ، في تطبيق React Redux ، يمكنك إنشاء متجر Redux واحد يدير حالة تطبيقك بالكامل. تشترك مكونات React الخاص بك في أجزاء البيانات الموجودة في المتجر ذات الصلة بدورها فقط. بعد ذلك ، يمكنك إرسال الإجراءات مباشرة من مكونات React ، والتي تؤدي بعد ذلك إلى تشغيل تحديثات المتجر. على الرغم من أن مكونات React تستطيع إدارة حالتها محليًا ، عندما يكون لديك تطبيق معقد ، فمن الأفضل بشكل عام الاحتفاظ بحالة التطبيق في موقع واحد باستخدام Redux. هناك استثناءات عندما تكون المكونات الفردية لها حالة محلية خاصة بها فقط. أخيرًا ، نظرًا لأن Redux غير مصمم للعمل مع React out of the box ، فأنت بحاجة إلى استخدام حزمة 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: &quot;&quot;, 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