Stuck on Redux: Write a Counter with Redux

JavaScript
1 
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const defaultState = {
    number: 0
}

const counterReducer = (state = defaultState.number, action) => {
    switch (action.type) {
        case INCREMENT:
            let copy = Object.assign({},defaultState);
                return copy.number + 1;
                break;
        case DECREMENT:
            let copy2 = Object.assign({},defaultState);
                return copy2.number - 1; 
                console.log(defaultState.number) 
                break;   
         default: return state;
    }
   
}


const incAction = function(add) {
    return {
        type:INCREMENT
    }
}

const decAction = function(subtract) {
    return {
        type:DECREMENT
    }
}

const store = Redux.createStore(counterReducer);

I have looked at other solutions. I really wanted to make use of Object.assign property as mentioned in the redux documentation. What I am trying to do is make a shallow copy of the default state object and return a new state that will update the number property to the new value.

1 Like
2

somehow I managed to pass the test doing this

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const defaultState = {
    number: 0
}

const counterReducer = (state = defaultState.number, action) => {
    switch (action.type) {
        case INCREMENT:
            let copy = Object.assign({},defaultState);
                return copy.number + 1;
                break;
        case DECREMENT:
            let copy2 = Object.assign({},defaultState);
            console.log(copy2.number-1) //This is the line that I added. 
                return copy2.number  //This is also another line that was modified. 
                break;   
         default: return state;
    }
   
}


const incAction = function(add) {
    return {
        type:INCREMENT
    }
}

const decAction = function(subtract) {
    return {
        type:DECREMENT
    }
}

const store = Redux.createStore(counterReducer);

what does console.log have to do with the solution to this challenge. Can anyone explain?

3

semicolon after console missing?

4

I solved it. Thanks for your input.

6

i could have sworn it was not passing until I added that line and then it passed. I deleted that line and sure enough it still worked.

I swear I tried it without that line though.

7

looking at your code and having similar issues. I reworked some things but have questions -
here is what I have:

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const defaultState = {
    number: 0
}

const counterReducer = (state = defaultState.number, action) => {
    
    const copy = Object.assign({}, defaultState);
    
    switch (action.type) {
        case INCREMENT:
            return copy.number + 1;
            break;
        case DECREMENT:
            return copy.number; 
            break; 
         default: return state;
    }
}


const incAction = function(add) {
    return {
        type:INCREMENT
    }
}

const decAction = function(subtract) {
    return {
        type:DECREMENT
    }
}

const store = Redux.createStore(counterReducer);

So mainly I don’t understand why in the action creator DECREMENT returns copy.number…I would think it should be copy.number - 1;

Also I tried to make copy using ES6 syntax and it doesn’t pass - not sure if I am doing something wrong or it is an issue with FCC ide?

Tried this:

const copy = {...defaultState}

why shouldn’t that work to make an immutable copy? On stackoverflow I found a post that it should be okay:

1 Like
8

Hey did you ever figure it out?

9

Wow, @zootechdrum your code seems to be more mature than mine.

Took me a while to solve it the way I did.
But some times, I just feel like Freecodecamps Console is very weird. lol.
Here’s my code, which I used to pass the challenge.

const INCREMENT = 'INCREMENT'; // define a constant for increment action types
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const counterReducer = (state=0, action) => {
  switch(action.type) {
    case INCREMENT:
    return state + 1;
    break;
    case DECREMENT:
    return state - 1;
    break;
    default:
    return state
  }
}; // define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = ()=> {
  return {type:INCREMENT}
}; // define an action creator for incrementing

const decAction = () => {
  return {type:DECREMENT}
}; // define an action creator for decrementing

const store = Redux.createStore(counterReducer); // define the Redux store here, passing in your reducers

While I was using the unary operators (state++ and state–) for changing the state, I wasn’t getting it.
Anyways. Its all good.
I just admire how you solved the problem with your code, especially within the switch statement.

3 Likes
10

Oh my gosh! I was having the same problem and I was using the unary operators for incrementing and decrementing also! But it must have been because I was putting them in the wrong place. I tried prefixing them to return ++state and --state and it passed. It’s gotta be because return state++ will return the value of state before it’s incremented, making it look like it’s not being incremented at all.
Thank you so much! Your feedback led me to figuring that out.

3 Likes
11 
const INCREMENT = 'INCREMENT'; // define a constant for increment action types
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types
const defaultState = {
    number: 0
}
// define the counter reducer which will increment or decrement the state based on the action it receives
const counterReducer = (state = defaultState.number, action) => {
    const copy = Object.assign({}, defaultState);
    switch (action.type) {
        case INCREMENT:
            return copy.number + 1;
        case DECREMENT:
            return copy.number; 
         default: return state;
    }   
} 
// define an action creator for incrementing
const incAction = function(add) {
    return {
        type:INCREMENT
    }
} 
// define an action creator for decrementing
const decAction  = function(subtract) {
    return {
        type:DECREMENT
    }
} 
 // define the Redux store here, passing in your reducer
const store = Redux.createStore(counterReducer);
12

why we are not using any dispatch(incAction ) or dispatch (decAction)