4.2 KiB
4.2 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036155 | Send Action Data to the Store | 6 | false | إرسال بيانات الإجراء إلى المتجر |
Description
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