freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036155	Send Action Data to the Store	6	false		إرسال بيانات الإجراء إلى المتجر

Description

تعلمت الآن كيفية إرسال إجراءات إلى متجر Redux ، ولكن حتى الآن لم تتضمن هذه الإجراءات أي معلومات بخلاف type . يمكنك أيضًا إرسال بيانات محددة مع إجراءاتك. في الواقع ، هذا أمر شائع جدًا لأن الإجراءات عادة ما تنشأ عن بعض تفاعل المستخدم وتميل إلى حمل بعض البيانات معهم. يحتاج مخزن Redux في الغالب إلى معرفة هذه البيانات.

Instructions

هناك ملاحظات أساسية notesReducer() addNoteText() عمل addNoteText() المحدد في محرر التعليمة البرمجية. قم addNoteText() الجسم addNoteText() بحيث تقوم بإرجاع كائن action . يجب أن يشتمل الكائن على خاصية type بقيمة ADD_NOTE ، وأيضًا خاصية text تعيينها إلى بيانات note التي تم تمريرها إلى منشئ الإجراء. عندما تتصل بمنشئ الإجراء ، ستقوم بتمرير معلومات ملاحظة محددة يمكنك الوصول إليها للكائن. بعد ذلك ، notesReducer() كتابة عبارة switch في notesReducer() . تحتاج إلى إضافة حالة تتعامل مع إجراءات addNoteText() . يجب أن تسبب هذه الحالة عندما يكون هناك عمل من نوع ADD_NOTE ويجب إرجاع text الملكية على واردة action باسم جديدة state . يتم إرسال الإجراء في أسفل الرمز. بمجرد الانتهاء ، قم بتشغيل التعليمات البرمجية ومشاهدة وحدة التحكم. هذا هو كل ما يتطلبه الأمر لإرسال البيانات الخاصة بالإجراء إلى المتجر واستخدامها عند تحديث state المتجر.

Tests

tests:
  - text: يجب أن <code>addNoteText</code> منشئ <code>addNoteText</code> بإرجاع كائن يحتوي على <code>type</code> المفاتيح <code>text</code> .
    testString: 'assert((function() { const addNoteFn = addNoteText("__TEST__NOTE"); return addNoteFn.type === ADD_NOTE && addNoteFn.text === "__TEST__NOTE" })(), "The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.");'
  - text: يجب أن يؤدي إرسال إجراء من النوع <code>ADD_NOTE</code> باستخدام منشئ إجراء <code>addNoteText</code> تحديث <code>state</code> إلى السلسلة التي تم تمريرها إلى منشئ الإجراء.
    testString: 'assert((function() { const initialState = store.getState(); store.dispatch(addNoteText("__TEST__NOTE")); const newState = store.getState(); return initialState !== newState && newState === "__TEST__NOTE" })(), "Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> to the string passed to the action creator.");'

Challenge Seed

const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // change code below this line

    // change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // change code below this line

  // change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());

Solution

// solution required

4.2 KiB Raw Blame History