I fail to see why my code doesn´t pass the test:
const defaultState = {
authenticated: false
};
const authReducer = (state = defaultState, action) => {
// change code below this line
switch(action.type) {
case "LOGIN":
{authenticated: true}
break;
case "LOGOUT":
{authenticated: false}
break;
default:
state
}
// change code above this line
};
const store = Redux.createStore(authReducer);
const loginUser = () => {
return {
type: 'LOGIN'
}
};
const logoutUser = () => {
return {
type: 'LOGOUT'
}
};
1 Like
You forgot to return
the data!
case "LOGIN":
return {authenticated: true}
Also return
it for the LOGOUT
and default
case.
3 Likes
Why do I need return though? Wouldn´t it return anyway with “break”?
The break
just breaks out of the switch statement.
If you want it to work with break, you will need to do this like this:
const authReducer = (state = defaultState, action) => {
// change code below this line
let newState;
switch(action.type) {
case "LOGIN":
newState = {authenticated: true}
break;
case "LOGOUT":
newState = {authenticated: false}
break;
default:
newState = state
}
return newState;
// change code above this line
};
You always have to return the value!
If you do it with the inline return as I suggested before, you don’t need to use break
keyword, because once you return the value, the function will stop executing further.
2 Likes
Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler]
and [/spoiler]
tags on the line above and below your solution code.
Thank you.
3 Likes
husseyexplores is correct. You need a return
. Without the return
, your reducer (a function) would not return anything. Reducers have to return what you want the new state to be, always. They have to return some version of the state, even if it is just the original one that was passed in. A break
will break you out of the switch
but it will not return anything. husseyexplores, in his latest post, offers a different way, where you break out of each case
and then have one return
at the bottom. This works but (as husseyexplores knows) is not the standard way in redux. Typically (as husseyexplores initially suggested) you return the new state you want out of each case
block. At the end you have a default
where you return the unchanged state that was passed into your reducer. There is no need for break
statements because the return
statement exits the function immediately. This is the standard redux way to do it. You will see things like:
const defaultState = 0;
const counterReducer = (state = defaultState, action) => {
switch(action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
case "RESET":
return defaultState;
default:
return state;
}
};
That looks a little weird if you are not used to seeing multiple return
statements or assume that you need break
statements. But it is perfectly acceptable JavaScript and works perfectly. It’s just a different way of controlling the flow of code and you’ll get used to it.
3 Likes