Redux Handle an Action in the Store "afterState is undefined"?

Tell us what’s happening:
created the code shown below- it SHOULD work but am getting an error in the console of “afterState is undefined” . I have no idea what or where afterState is? This is in Firefox.

In Chrome I get "cannot read property ‘login’ of undefined.
I even checked against the hint given…

Thank you, I’m sure it’s a typo somewhere…:thinking:

Your code so far


const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // change code below this line
   if(action.type === 'LOGIN')
    {
      return
      {
        login: true
      }
    } 
    else 
      {
      return defaultState
      }
    
  // change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0.

Link to the challenge:

Make sure your return statement has curly bracket on the same line. It should be

  return {
    login: true
  }

not

  return
  {
    login: true
  }

This is invalid JS syntax.

1 Like

Just to clarify, this is not invalid syntax, it is completely valid, and it being valid is why you are getting the error.

// this is valid, the JS interpreter sees
// the new line, interprets as end of return
// statement, and inserts a semicolon:
return
// which means it becomes
return;
// The next next few lines are valid JS, 
// just irrelevant because the `return` has
// has already happened:
{
  login: true
}

return on its own is completely valid (and semicolons are optional in JS), so you’re just telling the function to return undefined. Do not break to a new line after a return keyword if you want to actually return some value, it will never work.

1 Like

D’oh!

That is where I messed up. Not the first time. When I first learned React last year I did the same thing with with Render/return–

render {
   return 
     (
      blah blah blah
    )
 }

instead of the right way-

render{
        return(
         and more code here
              )
         }

Thank you!