4.4 KiB
4.4 KiB
id | title | challengeType | isRequired | forumTopicId |
---|---|---|---|---|
5a24c314108439a4d4036151 | Use a Switch Statement to Handle Multiple Actions | 6 | false | 301449 |
Description
authenticated
. You also need action creators that create actions corresponding to user login and user logout, along with the action objects themselves.
Instructions
reducer
function to handle multiple authentication actions. Use a JavaScript switch
statement in the reducer
to respond to different action events. This is a standard pattern in writing Redux reducers. The switch statement should switch over action.type
and return the appropriate authentication state.
Note: At this point, don't worry about state immutability, since it is small and simple in this example. For each action, you can return a new object — for example, {authenticated: true}
. Also, don't forget to write a default
case in your switch statement that returns the current state
. This is important because once your app has multiple reducers, they are all run any time an action dispatch is made, even when the action isn't related to that reducer. In such a case, you want to make sure that you return the current state
.
Tests
tests:
- text: Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.
testString: assert(loginUser().type === 'LOGIN');
- text: Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.
testString: assert(logoutUser().type === 'LOGOUT');
- text: The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.
testString: assert(store.getState().authenticated === false);
- text: Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })());
- text: Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.
testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })());
- text: The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.
testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'));
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
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'
}
};