Stuck!: Handling actions in redux

JavaScript
1

Tell us what’s happening:

I’m not really sure what I’m doing wrong here, am I calling the dispatch in the wrong area perhaps? new to redux and I’ve been stuck on this one since yesterday. I’m pretty sure its something simple I’m missing.

Your code so far


const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
   switch (action.type) {
       case "LOGIN":
        return {...state, login: true};
      default:
        return state;
    }
    store.dispatch(loginAction())
}
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_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/handle-an-action-in-the-store

2

There are two problems here.

First of all, you don’t need to call the dispatch. That is how you got to the reducer and you don’t need to do it yourself. In truth, you almost never call dispatch directly, but do it my calling functions allocated by mapDispatchToProps. The only place I ever call a dispatch is in a thunk, but that is beyond where you are now. I guess, in this training, there may be places to call dispatch, but definitely not here - remove that line.

Second, when you are changing the state, {...state, login: true}, that is unnecessary, just {login: true} does the job because it is the only prop. In theory yours should work fine, but for some reason it seems to screw up the test.

3

Ohh I see now, thanks much @kevinSmith! I must have been going a bit ahead of myself

4

Yeah, just to be clear, the pattern:

return {...state, login: true};

is a very common one and gets used in reducers a lot. I’m not completely sure why it is not working here.