Write a Counter with Redux - not seeing what is triggering error

JavaScript
#1

I am just not seeing what I’m doing wrong here. Getting following errors:

Dispatching incAction on the Redux store should increment the state by 1.

Dispatching decAction on the Redux store should decrement the state by 1.

Am I not doing that…? Thanks in advance.

Your code so far


const INCREMENT = "INCREMENT"; 
const DECREMENT = "DECREMENT"; 

const defaultState= {
    counter: 0
}

const counterReducer = (state = defaultState, action) => {
  // change code below this line
switch (action.type) {
  case INCREMENT:
    return {state: state.counter + 1}
    break;

  case DECREMENT:
    return {state: state.counter - 1}
    break;

  default:
    return state.counter
}
  // change code above this line
};


const incAction = () => {
  return {
    type: INCREMENT
  }
};


const decAction = () => {
  return {
    type: DECREMENT
  }
};

const store = Redux.createStore(counterReducer);

Link to the challenge:

#2

You’ve added some complexity to this. But first let’s talk about what you have here:

const defaultState= {
    counter: 0
}

If your state is like that, then the innards of your reducer should look something like:

    switch (action.type) {
        case INCREMENT:
            return {counter: state.counter + 1}
            break;

        case DECREMENT:
            return {counter: state.counter - 1}
            break;

        default:
            return state
    }

But…

That isn’t what your state should look like. You’ve made the state an object and created a property called counter. Now, that is a very reasonable and even sensible thing to do. But it is not what they’ve asked for here. The challenge isn’t very specific, but they just want the simplest state possible. They just want a number. So, your default state should just be:

const defaultState = 0;

So, the reducer state is your counter. Yes, often you would create an object like you did. But they are trying to keep this simple. With this in mind, can you see how you need to adjust your reducer to make this work? Understanding that the state itself is the counter?

1 Like
#3

Funny you said that…because I actually started out with something similar to what you said except that instead of const defaultState = 0; I set const counter= 0; (see code - part 2). I deleted that after seeing what others had done. Since that did not work either, I tried your way (const defaultState = 0;, see code - part 1). But am still getting the same errors…??

Code part 1:

const INCREMENT = "INCREMENT"; 
const DECREMENT = "DECREMENT"; 

const defaultState = 0;

const counterReducer = (state = defaultState, action) => {
  // change code below this line
switch (action.type) {
  case INCREMENT:
    return {state: defaultState + 1}
    break;

  case DECREMENT:
    return {state: defaultState - 1}
    break;

  default:
    return defaultState
}
  // change code above this line
};


const incAction = () => {
  return {
    type: INCREMENT
  }
};


const decAction = () => {
  return {
    type: DECREMENT
  }
};

const store = Redux.createStore(counterReducer);

Code part 2:

const INCREMENT = "INCREMENT"; 
const DECREMENT = "DECREMENT"; 

const counter = 0;

const counterReducer = (state = counter, action) => {
  // change code below this line
switch (action.type) {
  case INCREMENT:
    return {state: counter + 1}
    break;

  case DECREMENT:
    return {state: counter - 1}
    break;

  default:
    return counter
}
  // change code above this line
};


const incAction = () => {
  return {
    type: INCREMENT
  }
};


const decAction = () => {
  return {
    type: DECREMENT
  }
};

const store = Redux.createStore(counterReducer);
#4 
return {state: defaultState + 1}

You want to return the new state. Your old state is the variable state. Basically, return what you want the new state to be. Not wrapped in an object - remember that state is not an object in this case, just a number. So, take it out of the object, and don’t add 1 to the defaultState add it to the …

1 Like
#5