5.2 KiB
id, title, challengeType, forumTopicId, dashedName
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036151 | Використовуйте команду Switch для виконання декількох дій | 6 | 301449 | use-a-switch-statement-to-handle-multiple-actions |
--description--
Ви можете вказати в сховищі Redux, як обробляти кілька типів дій. Припустимо, ви керуєте автентифікацією користувача у вашому сховищі Redux. Ви хочете мати чітке уявлення, коли користувачі входять у систему та коли вони виходять. Ви передаєте це єдиним чітким об’єктом із властивістю authenticated
. Вам також потрібні творці дій, які створюють дії, що відповідають призначеним для входу користувача та виходу користувача, разом з самими об'єктами.
--instructions--
У редакторі коду є сховище, дії та виконавці створені для вас. Заповніть функцію reducer
для обробки кількох дій автентифікації. Використовуйте команду JavaScript switch
у reducer
, щоб відповідати на різні події дій. Це стандартний шаблон для написання Redux reducers. Команда switch повинна перемикати action.type
і повертати відповідний стан автентифікації.
**Note:**Наразі не турбуйтеся про незмінність стану, оскільки в цьому прикладі він невеликий і простий. Для кожної дії, можна повернути новий об'єкт - наприклад, {authenticated: true}
. Також не забудьте написати default
випадок у вашій команді switch, яка повертає поточнийstate
. Це важливо, оскільки, коли у вашому додатку є кілька reducers, усі вони запускаються щоразу, коли надсилається дія, навіть якщо ця дія не пов’язана з цим reducer. У такому випадку варто переконатися, що ви повертаєте поточний state
.
--hints--
Виклик функції loginUser
має повернути об’єкт із властивістю типу рядок LOGIN
.
assert(loginUser().type === 'LOGIN');
Виклик функції logoutUser
має повернути об’єкт із властивістю типу рядок LOGOUT
.
assert(logoutUser().type === 'LOGOUT');
Зберігання має бути ініціалізовано об'єктом із властивістю authenticated
, встановленою на false
.
assert(store.getState().authenticated === false);
Відправлення loginUser
має оновити властивість authenticated
у стані сховища до true
.
assert(
(function () {
const initialState = store.getState();
store.dispatch(loginUser());
const afterLogin = store.getState();
return (
initialState.authenticated === false && afterLogin.authenticated === true
);
})()
);
Відправлення logoutUser
має оновити властивість authenticated
у стані сховища до false
.
assert(
(function () {
store.dispatch(loginUser());
const loggedIn = store.getState();
store.dispatch(logoutUser());
const afterLogout = store.getState();
return (
loggedIn.authenticated === true && afterLogout.authenticated === false
);
})()
);
Функція authReducer
повинна обробляти кілька типів дій за допомогою команди switch
.
(getUserInput) =>
assert(
getUserInput('index').toString().includes('switch') &&
getUserInput('index').toString().includes('case') &&
getUserInput('index').toString().includes('default')
);
--seed--
--seed-contents--
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'
}
};
--solutions--
const defaultState = {
authenticated: false
};
const authReducer = (state = defaultState, action) => {
switch (action.type) {
case 'LOGIN':
return {
authenticated: true
}
case 'LOGOUT':
return {
authenticated: false
}
default:
return state;
}
};
const store = Redux.createStore(authReducer);
const loginUser = () => {
return {
type: 'LOGIN'
}
};
const logoutUser = () => {
return {
type: 'LOGOUT'
}
};