React: Write a Counter with Redux

[karlito]

Hello,
Write a Counter with Redux

I had succed with this exercice, but I wonder If it’s possible to make it with a state object instead of just State = 0.
This is what I tried to do at the begining:

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

const counterReducer = (state = {count: 0}, action) => {
  switch(action.type) {
    case INCREMENT:
      return {
        count: count + 1
      }
    case DECREMENT:
      return {
        count: count - 1
      }
    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

[kevinSmith]

Can you make a reducer that returns an object? Sure, you do it all the time. But does it make sense in this case? It’s a counter, I expect it to be a number. If I had a reducer called userInformationReducer, that is more complex data so I would expect it to be an object. A reducer can return any JS data type.

So, sure, you could make your counter an object. I don’t know why, but you could. But that would change the shape of state so everywhere that consumes that section of state would need to be changed to expect that.

But sure, it could work fine.

[kevinSmith]

I would expect you to have something like this, though:

    case INCREMENT:
      return {
        count: state.count + 1
      }

Since count is not defined here.

[karlito]

Yes I had also tried this solution but that’s don’t work.

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

const counterReducer = (state = {count: 0}, action) => {
  switch(action.type) {
    case INCREMENT:
      return {
        count: state.count + 1
      }
    case DECREMENT:
       return {
        count: state.count - 1
      }
      
    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"

[kevinSmith]

Well, it isn’t going to pass the tests because the tests are expecting that state leaf to be a number. I’m saying that if you designed your own, from the ground up, you could do that. Your reducer looks right to me.

[karlito]

Ok super, so I well understood. Thank you.