4.8 KiB
4.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036151 | Use a Switch Statement to Handle Multiple Actions | 6 | false | استخدم بيان تبديل للتعامل مع إجراءات متعددة |
Description
authenticated
. تحتاج أيضًا إلى منشئي إجراءات ينشئون إجراءات تتوافق مع تسجيل دخول المستخدم وخروج المستخدم ، بالإضافة إلى كائنات الإجراءات نفسها. Instructions
reducer
للتعامل مع إجراءات التوثيق المتعددة. استخدم عبارة switch
JavaScript في reducer
للرد على أحداث إجراء مختلفة. هذا هو نمط قياسي في كتابة مخفضات Redux. يجب أن يقوم بيان التبديل action.type
وإرجاع حالة المصادقة المناسبة. ملاحظة: في هذه المرحلة ، لا تقلق بشأن ثبات النظام ، لأنها صغيرة وبسيطة في هذا المثال. لكل إجراء ، يمكنك إرجاع كائن جديد - على سبيل المثال ، {authenticated: true}
. لا تنس أيضًا كتابة حالة default
في كشف التبديل الخاص بك تقوم بإرجاع state
الحالية. هذا أمر مهم لأنه بمجرد أن يحتوي تطبيقك على مخفضات متعددة ، يتم تشغيلها في أي وقت يتم فيه إرسال إجراء ، حتى عندما لا يكون الإجراء مرتبطًا بمخفض المخفِّض هذا. في مثل هذه الحالة ، تحتاج إلى التأكد من إرجاع state
الحالية. Tests
tests:
- text: يجب أن <code>loginUser</code> استدعاء الدالة <code>loginUser</code> إرجاع كائن له خاصية كتابة معينة إلى السلسلة <code>LOGIN</code> .
testString: 'assert(loginUser().type === "LOGIN", "Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.");'
- text: ''
testString: 'assert(logoutUser().type === "LOGOUT", "Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.");'
- text: ''
testString: 'assert(store.getState().authenticated === false, "The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.");'
- text: ''
testString: 'assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), "Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.");'
- text: ''
testString: 'assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), "Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.");'
- text: ''
testString: 'getUserInput => assert( getUserInput("index").toString().includes("switch") && getUserInput("index").toString().includes("case") && getUserInput("index").toString().includes("default"), "The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.");'
Challenge Seed
const defaultState = {
authenticated: false
};
const authReducer = (state = defaultState, action) => {
// change code below this line
// change code above this line
};
const store = Redux.createStore(authReducer);
const loginUser = () => {
return {
type: 'LOGIN'
}
};
const logoutUser = () => {
return {
type: 'LOGOUT'
}
};
Solution
// solution required