--description--
A common practice when working with Redux is to assign action types as read-only constants, then reference these constants wherever they are used. You can refactor the code you're working with to write the action types as const
declarations.
--instructions--
Declare LOGIN
and LOGOUT
as const
values and assign them to the strings 'LOGIN'
and 'LOGOUT'
, respectively. Then, edit the authReducer()
and the action creators to reference these constants instead of string values.
Note: It's generally a convention to write constants in all uppercase, and this is standard practice in Redux as well.
--hints--
Calling the function loginUser
should return an object with type
property set to the string LOGIN
.
assert(loginUser().type === 'LOGIN');
Calling the function logoutUser
should return an object with type
property set to the string LOGOUT
.
assert(logoutUser().type === 'LOGOUT');
The store should be initialized with an object with property login
set to false
.
assert(store.getState().authenticated === false);
Dispatching loginUser
should update the login
property in the store state to true
.
assert(
(function () {
const initialState = store.getState();
store.dispatch(loginUser());
const afterLogin = store.getState();
return (
initialState.authenticated === false && afterLogin.authenticated === true
);
})()
);
Dispatching logoutUser
should update the login
property in the store state to false
.
assert(
(function () {
store.dispatch(loginUser());
const loggedIn = store.getState();
store.dispatch(logoutUser());
const afterLogout = store.getState();
return (
loggedIn.authenticated === true && afterLogout.authenticated === false
);
})()
);
The authReducer
function should handle multiple action types with a switch statement.
(getUserInput) =>
assert(
(function () {
return (
typeof authReducer === 'function' &&
getUserInput('index').toString().includes('switch') &&
getUserInput('index').toString().includes('case') &&
getUserInput('index').toString().includes('default')
);
})()
);
LOGIN
and LOGOUT
should be declared as const
values and should be assigned strings of LOGIN
and LOGOUT
.
const noWhiteSpace = __helpers.removeWhiteSpace(code);
assert(LOGIN === 'LOGIN' && LOGOUT === 'LOGOUT')
assert(noWhiteSpace.includes('const'))
The action creators and the reducer should reference the LOGIN
and LOGOUT
constants.
(getUserInput) =>
assert(
(function () {
const noWhiteSpace = __helpers.removeWhiteSpace(
getUserInput('index').toString()
);
return (
noWhiteSpace.includes('caseLOGIN:') &&
noWhiteSpace.includes('caseLOGOUT:') &&
noWhiteSpace.includes('type:LOGIN') &&
noWhiteSpace.includes('type:LOGOUT')
);
})()
);
--seed--
--seed-contents--
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'
}
};
--solutions--
const LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';
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
}
};