Skip to main content

--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 LOGINand 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
}
};